深入解析：如何定义 Vue 的动态路由及参数获取全流程

1. 引言为什么要使用动态路由在现代前端开发中我们经常遇到这样的场景同一个页面组件需要展示不同用户的数据。例如用户详情页虽然都是/user但每个用户对应的 ID 不同如 /user/1, /user/2。如果为每个用户创建一个路由配置会极大地增加路由配置的复杂度。这时动态路由就派上了用场。2. 定义动态路由的两种方式2.1 在路由配置文件中预定义这是最常见的方式。我们直接在router/index.js中配置带有冒号:的 path 参数。关键语法path: /user/:id2.2 动态添加路由在某些需要根据后台权限动态渲染菜单的场景下我们无法提前在配置文件中写死所有路由需要在页面初始化或登录成功后动态注册路由。关键语法// Vue Router 4 (Vue 3) router.addRoute(parent, { path: /dynamic, component: DynamicComponent }) // Vue Router 3 (Vue 2) router.addRoutes([{ path: /dynamic, component: DynamicComponent }])3. 获取传过来的动态参数无论采用哪种定义方式当路由匹配成功并跳转到对应组件时我们可以通过this.$route.params来获取 URL 中的动态参数。关键语法this.$route.params.id4. 动态路由与参数获取流程以下流程图展示了从定义到获取参数的完整闭环。方式一:预定义方式二:动态添加成功失败开始路由导航定义方式在 router/index.js 中定义路径如: /user/:id调用 router.addRoute运行时注册路由用户访问 /user/123路由匹配成功VueRouter 匹配组件重定向或 404组件渲染并获取参数通过 $route.params.id 获取 ID渲染动态数据5. 完整代码示例下面我们通过一个完整的示例来演示这两种方式重点展示如何获取参数。5.1 路由配置示例在src/router/index.js中进行配置import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import UserDetail from ../views/UserDetail.vue const routes [ { path: /, name: Home, component: Home }, // 方式一预定义动态路由 { path: /user/:id, name: UserDetail, component: UserDetail, props: true // 可选将路由参数作为 props 传递给组件 }, // ... ] const router createRouter({ history: createWebHistory(), routes }) export default router5.2 获取参数的组件示例在src/views/UserDetail.vue中template div classuser-detail h2用户详情页/h2 !-- 1. 使用 $route.params 获取参数 -- p当前用户 ID: {{ userId }}/p p用户名称: {{ userName }}/p /div /template script export default { name: UserDetail, // 方式二直接在 props 中接收 (推荐) props: [id], computed: { // 如果使用 props 接收这里不需要访问 $route // 如果直接访问 $route则需要 this.$route.params.id userId() { return this.$route.params.id }, userName() { return 用户_ this.$route.params.id } }, mounted() { console.log(获取到的参数:, this.$route.params) } } /script style scoped .user-detail { padding: 20px; } /style6. 总结定义方式静态预定义使用path: /path/:param动态添加使用router.addRoute。参数获取核心是this.$route.params.paramName。最佳实践建议使用props: true将参数以 props 形式传入组件这样组件更加纯粹解耦了路由逻辑。