Vue-router进阶
动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。
例如,我们有一个 User
组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,像 /user/foo
和 /user/bar
都将映射到相同的组件。
1、添加路由关系
-
在components目录新建User.vue文件,内容形式和之前的home差不多,作为一个组件使用。
-
在router/index.js引入User
import User from '../components/User.vue'
-
在router/index.js的routes中添加
{ // 动态路径参数 以冒号开头 path:'/user/:userId', component: User }
一个“路径参数”使用冒号
:
标记。至此,URL中userId可以随意改变,都会映射到User组件。
2、获取动态参数userId的值
-
可以使用计算属性
在User.vue中添加
computed