Vue CLI 入门03 vue-router 动态路由

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