1. 引言：为什么要使用动态路由？
在现代前端开发中，我们经常遇到这样的场景：同一个页面组件，需要展示不同用户的数据。例如用户详情页，虽然都是 /user，但每个用户对应的 ID 不同（如 /user/1, /user/2）。如果为每个用户创建一个路由配置，会极大地增加路由配置的复杂度。这时，动态路由就派上了用场。
2. 定义动态路由的两种方式
2.1 在路由配置文件中预定义
这是最常见的方式。我们直接在 router/index.js 中配置带有冒号（:）的 path 参数。
关键语法：
path: '/user/:id'
2.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.id
4. 动态路由与参数获取流程
以下流程图展示了从定义到获取参数的完整闭环。
#publish-mermaid-1785468599738-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785468599738-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785468599738-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785468599738-0 .error-icon{fill:#552222;}#publish-mermaid-1785468599738-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785468599738-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785468599738-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785468599738-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785468599738-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785468599738-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785468599738-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785468599738-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785468599738-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785468599738-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785468599738-0 p{margin:0;}#publish-mermaid-1785468599738-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785468599738-0 .cluster-label text{fill:#333;}#publish-mermaid-1785468599738-0 .cluster-label span{color:#333;}#publish-mermaid-1785468599738-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785468599738-0 .label text,#publish-mermaid-1785468599738-0 span{fill:#333;color:#333;}#publish-mermaid-1785468599738-0 .node rect,#publish-mermaid-1785468599738-0 .node circle,#publish-mermaid-1785468599738-0 .node ellipse,#publish-mermaid-1785468599738-0 .node polygon,#publish-mermaid-1785468599738-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785468599738-0 .rough-node .label text,#publish-mermaid-1785468599738-0 .node .label text,#publish-mermaid-1785468599738-0 .image-shape .label,#publish-mermaid-1785468599738-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785468599738-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785468599738-0 .rough-node .label,#publish-mermaid-1785468599738-0 .node .label,#publish-mermaid-1785468599738-0 .image-shape .label,#publish-mermaid-1785468599738-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785468599738-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785468599738-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785468599738-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785468599738-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785468599738-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785468599738-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785468599738-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785468599738-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785468599738-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785468599738-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785468599738-0 .cluster text{fill:#333;}#publish-mermaid-1785468599738-0 .cluster span{color:#333;}#publish-mermaid-1785468599738-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785468599738-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785468599738-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785468599738-0 .icon-shape,#publish-mermaid-1785468599738-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785468599738-0 .icon-shape p,#publish-mermaid-1785468599738-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785468599738-0 .icon-shape .label rect,#publish-mermaid-1785468599738-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785468599738-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785468599738-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785468599738-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785468599738-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785468599738-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785468599738-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}方式一: 预定义方式二: 动态添加成功失败
开始路由导航
定义方式
在 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 router
5.2 获取参数的组件示例
在 src/views/UserDetail.vue 中：
<template>
<div class="user-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;
}
</style>
