vueRouter--动态路由解析

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

在配置vue的路由时可以使用一个特殊的符号‘ : ’。这个‘ : ’可以理解是一个路径片段的通配符，也就是说它可以匹配到任何的路径片段

而这个‘ : ’后面会跟一个字符串（官方称为路径参数），可以把它当做路径别名，也可以看成一个变量名，这个变量会被注入进this.$route.params中。这时如果我们通过this.$router.push()进行路径跳转，就可以通过this.$route.params来获取到对应的路径值

//假设有如下路由
const router = new VueRouter({
    routes: [
        {
            path: '/practice/:practiceId', // 动态路径参数 以冒号开头
            component: {}, //组件，比如练习详情页面
        }
    ]
});

//某个时刻进行了路径跳转
this.$router.push({
    path: '/practice/123321',//不管是/practice/123321，还是/practice/456789，他们都会跳转到练习详情页面
});


//然后可以在练习详情页面打印params下的practiceId得到路径值，该值表示了一个练习的id
console.dir(this.$route.params.practiceId); //123321