vue动态路由匹配
原创
©著作权归作者所有:来自51CTO博客作者qq5945ef689245b的原创作品,请联系作者获取转载授权,否则将追究法律责任
什么是动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User
组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router
的路由路径中使用动态路径参数来达到这个效果
示例:
这是公共的组件 (DynamicRouteDemo.vue)
<template>
<div>
<div>我是公共的组件</div>
<span>这是组件的参数:{{ $route.params.id }}</span>
</div>
</template>
<script>
export default {
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
// 当路由改变时可获取当前路由与之前路由的参数如下
// {urlName: "DynamicRouteTwo"}
// {urlName: "DynamicRouteOne"}
console.log(to.params)
console.log(from.params)
next()
},
}
</script>
这是其父组件代码(RouterView.vue)
<p>
<router-link to="/test/routerView/user/DynamicRouteOne">/test/routerView/user/DynamicRouteOne</router-link>
<router-link to="/test/routerView/user/DynamicRouteTwo">/test/routerView/user/DynamicRouteTwo</router-link>
</p>
<router-view></router-view>
v>
这是路由配置
{
path: 'routerView',
component: RouterView,
name: 'routerView',
children: [
{ path: '/test/routerView/user/:urlName', component: DynamicRouteDemo},
],
},
可以在一个路由中设置多段“路径参数”,对应的值都会设置到 $route.params
中。例如:
模式
| 匹配路径
| $route.params
|
/user/:username
| /user/evan
| { username: 'evan' } |
/user/:username/post/:post_id
| /user/evan/post/123
| { username: 'evan', post_id: '123' } |