Vue Router 获取动态路由参数需在路由配置中声明带冒号的路径段（如 /user/:id），通过 $route.params 读取字符串值，组合式 API 用 useRoute()，响应变化需监听 $route 或使用 beforeRouteUpdate 守卫，注意区分 params（路径参数）与 query（查询参数）。
Vue Router 获取动态路由的路径参数，核心是通过 $route.params 对象读取，前提是路由配置中已正确定义了带冒号的动态段（如 /user/:id）。
确认路由配置含动态段
路径参数必须在路由规则里显式声明，否则无法捕获：
- 写法正确：
{ path: '/user/:id', component: User } - 写法错误：
{ path: '/user', component: User }—— 这样访问/user/123不会匹配，$route.params为空 - 支持多个参数：
/post/:year/:month/:id会生成{ year: '2024', month: '09', id: '789' }
在组件中读取 params
this.$route.params 是一个普通 JavaScript 对象，所有动态段的值都以字符串形式存在：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 模板中直接使用：
{{ $route.params.id }} - 选项式 API 中获取：
this.$route.params.id - 组合式 API 中获取：
import { useRoute } from 'vue-router'; const route = useRoute(); const id = route.params.id; - 注意：值始终为字符串，如需数字，需手动转换：
parseInt(route.params.id)或Number(route.params.id)
响应参数变化（组件复用时）
当从 /user/1 导航到 /user/2，User 组件被复用，mounted 不会再次触发。要响应参数变更：
立即学习“前端免费学习笔记（深入）”；
- 监听
$route：watch: { '$route': 'fetchUserData' }，然后在fetchUserData(to) { this.id = to.params.id; ... }中处理 - 使用导航守卫：
beforeRouteUpdate(to, from, next) { this.id = to.params.id; next(); } - 或启用
props: true，让 Vue Router 自动把params注入为组件 props，避免手动监听
区分 params 和 query
别混淆两种参数来源：
-
$route.params→ 来自路径本身，如/user/abc中的abc，依赖路由配置中的:id -
$route.query→ 来自 URL 查询字符串，如/user?id=abc中的id，无需提前定义路由规则 - 两者可共存：
/user/123?tab=profile&sort=desc→params: { id: '123' }，query: { tab: 'profile', sort: 'desc' }
