vue-router动态路径参数

1.应用场景:只有一个组件,有多个用户ID;多个用户ID都要映射到这个组件上
2.语法:动态路径参数以:开头,仅有路径参数不同的路径都将映射到同一个路由,当匹配到一个路由时,参数值会被设置到this.$route.params,如图黄色部分:
vue-router动态路径参数_第1张图片
this.$route.params属性可以在每个组件当中使用,比如我们可以修改user组件:
vue-router动态路径参数_第2张图片
如果路由挂载成功会有这个标签出现在Vuetools里
vue-router动态路径参数_第3张图片
一个路由可以有多段路径参数,对应的值都会设置到 $route.params
vue-router动态路径参数_第4张图片
vue-router动态路径参数_第5张图片
3.特点
(1)组件复用
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。组件的生命周期钩子不会再被调用。
(2)匹配优先级
一个路径可以匹配多个路由时,匹配的优先级就按照路由定义的顺序
4.高级匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。查看它的文档 学习高阶的路径匹配,还有 这个例子 展示 vue-router 怎么使用这类匹配。

你可能感兴趣的:(vue)