# 动态路由
# 使用场景
把某种模式匹配到的所有路由，全都映射到同个组件，例如：有一个 User 组件，对于所有 ID 各不相同的用户个人信息页面，都要使用这个组件来渲染。
# 动态路径参数
在 vue-router 中可以使用“动态路径参数”(dynamic segment) 来达到这个效果。
一个“路径参数”使用冒号 : 标记。
如下，两个路由都映射到名为User的组件上
<router-link to="/user/01">user01</router-link>
<router-link to="/user/02">user02</router-link>
1
2
2
const router = new VueRouter({
routes: [
// 动态路径参数 id 以冒号开头
{ path: '/user/:id', component: User }
]
});
1
2
3
4
5
6
2
3
4
5
6
注意
使用动态路径参数后，当匹配到一个路由时，参数值会被设置到this.$route.params中，可以在每个组件中使用。`$router 见vue-router-api 文档
# 常见的传递参数的方式
常见的向路由传递参数的方式
- 路由传值(动态路由匹配) ==> 是路由的一部分
- 查询参数传值。==> 不是路由的一部分
# 常见的跳转路由的方式
1. 声明式导航： 利用<router-link></router-link>。
2. 编程式导航： 利用js方式跳转路由 this.$route.push('/user/1')
示例：
<button @click="goUser1()">User1</button><br />
1
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: { template: `<div>this is the page of {{ $route.params.id}}</div>` } },
]
});
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
router,
methods: {
goUser1() {
// 编程式导航 + 动态路由参数
this.$router.push('/user/1');
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18