vue动态路由匹配

什么是动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 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' }