动态路由匹配 (多个路由映射一个组件) 参数设置 参数获取

动态路由匹配

动态路由的必要性

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。
如果我们一个一个定义路由规则的话也是可以的
但是路由规则的复用性就会变得很差

例如，我们有一个 User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。
那么，我们可以在vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

动态路径参数 以冒号开头

动态路由参数设置

动态路由指的是：把Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。

1. 动态路由参数的设置:

   1. 使用场景：某种模式匹配到的所有路由，全都映射到同个组件
   2. “路由参数”使用冒号 :标记

   {
         name: 'about',          
         path: '/about/:id',	//设置参数
         component: about,
   }
   

2. 动态路由参数的匹配

       <router-link to="/about/1">广州</router-link> 
       <router-link to="/about/2">深圳</router-link>
       <router-link to="/about/3">上海</router-link>
   

注意：

1. 如果没有传递参数，则路由无法匹配
2. 不用在传递参数的时候添加:了

动态路由参数获取

方法一

1. 在mounted钩子函数中添加代码
2. 通过$route.params获取路由参数，它是一个对象

方法二

为了简化路由参数的获取形式，vue-router允许在路由规则中开启props传参
1.在路由规则中设置props:true

{           
	 name: 'about',          //命名路由
	 path: '/about/:id',
	 component: about,
	 props: true,   //可在该组件中, 以props的形式 接收 路由规则所匹配到的参数
}

2.在路由所映射的组件中使用props接收路由参数(直接定义props成员接收路由规则中所匹配到的参数)

  //通过props接收路由参数
  props: ["id"],

动态路由参数 监听变化

1. 当使用动态路由参数时，如果只是参数的变化，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效

2. 意味着组件的生命周期钩子不会再被调用(mounted不会再触发)

3. 我们可以watch (监测变化) $route对象，以监听路由参数的变化

     watch: {
       $route(to, from) {
       },
     },