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