在Vue Router中，路由路径有以下几种匹配形式：
- 静态匹配：即完全按照
path中的内容，进行相等匹配。 - 动态匹配：根据
path中定义的路径匹配规则匹配多个路径。
路径参数
Vue中的动态参数匹配使用的是路径参数匹配。路径参数是路径中的一个动态字段。路径参数的值会动态变化，根据这些路径参数的值，可以读取相应的数据或展示相应的页面。
例如，有个User组件对所有用户进行渲染，但用户ID不同。使用路径参数，可以让用户ID像路径中的某个资源或目录一样在URL中展示。变换不同的用户ID，就像切换目录一样路由到不同的用户界面。
使用路径参数包含3个步骤：
- 在Router配置文件（
router/index.js）中，配置路径参数的匹配规则。 - 使用
<router-link>传递路径参数。 - 在对应的路由组件中使用
$route.params接收路径参数。
配置路径参数匹配规则
在Router配置文件的route元素或children中的path属性上配置当前路由的路径参数匹配规则。
例如，在User路由组件中使用路径参数，其路由配置如下：
1/* ... */
2import User from '../pages/User.vue'
3
4export default new VueRouter({
5 routes: [
6 {
7 path: '/user/:id',
8 component: User,
9 },
10 ],
11})
如上User的路由规则可以使用/user/zhangsan、/user/lisi等方式映射。
将嵌套路由 —— 路由 Query 传参中的MessageDetail改为使用路径参数形式传参，其路由配置如下：
1/* ... */
2
3export default new VueRouter({
4 routes: [
5 /* about route... */
6 {
7 path: '/home',
8 component: Home,
9 children: [
10 /* news route... */
11 {
12 path: 'message',
13 component: Message,
14 children: [
15 {
16 path: ':id/:title', // 路径传参
17 component: MessageDetail,
18 }
19 ],
20 },
21 ]
22 },
23 ],
24})
在MessageDetail的path中，使用了两个以:为开头的占位符（:id和:title）。:后是当前路径参数的名称（id和title）。
传递路径参数
传递路径参数的方式与传递Query参数的方式十分相同。传递路径参数也有两种方式：
-
字符拼接：
1<router-link :to="`/home/message/${message.id}/${message.title}`"> -
传入对象：与传递Query参数的方式基本相同。不同的是，传递路径参数需要配置的是
toprop对象中params属性。并且传递路径参数时不能使用path属性指定路由，必须使用name来指定路由。1<router-link :to="{ 2 name: 'MessageDetail', 3 params: { 4 id: message.id, 5 title: message.title, 6 }, 7}"> 8 {{ message.title }} 9</router-link>在
params中配置传递的参数以及它们的值。params属性的key是传递的参数的名称（对应路由配置中占位符里:后的内容），value是传递的参数的值（就像Axios的params配置那样）。
接收路径参数
接收路径参数的形式与接收Query参数的形式也十分相似。在对应的路由组件实例中，使用$route.params来接收并获取这些路径参数。
接上例，在MessageDetail中接收并获取路径参数：
1computed: {
2 id() {
3 return this.$route.params.id
4 },
5 title() {
6 return this.$route.params.title
7 }
8}
在路由实例中，通过$route.params.argName的形式获取路径参数的值。
注：
获取路径参数的形式很固定，为了使代码更加简介、书写更加简便，可以如上使用
computed属性来接收它们的值。当然还有其它更简便的方法。路径参数需要在路由的
path中使用占位符配置，否则Vue Router不会接收到这些路径参数。
评论