动态路由

动态路由

定义：我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件。

例如：我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件渲染

一个【路径参数】 使用冒号：标记；

//动态路由的设置 
 {path:'/user/:id/:name/:age',component:user}
 <router-link to="/user/1/tom/18">user-1</router-link>                                                  <router-link to="/user/2/bob/20">user-2</router-link>

可以在一个路由中设置多段【路径参数】

动态路由的传参

1.params传参

定义动态路由：

{path: '/user/:id/:name/:age',component:User}

传输参数：

<router-link to="/user/1/tom/18>user-1</router-link>

接收参数：

<p>用户id--{{$route.params.id}}</p>                 
   <p>用户名称--{{$route.params.name}}</p>                                                                        <p>用户年龄--{{$route.params.age}}</p>   

2.props传参

值为布尔值的形式

定义动态路由：

{path:'/user/:id/:name/:age',component:User,props:true}

传输参数：

<router-link to="/user/1/tom/18">user-1 &nbsp; &nbsp;</router-link>
      <router-link to="/user/2/jack/28">user-2 &nbsp; &nbsp;</router-link>
      <router-link to="/user/3/mary/18">user-3 &nbsp; &nbsp;</router-link>

接收参数：

props:['id','name','age']

值为函数的形式

定义动态路由：

{path:'/user',name:'user',component:User,props:function(route){return{id:route.params.id,name:route.params.name,age:route.params.age}}}

传输参数：

<router-link v-bind:to="{name:'user',params:{id:4,name:'test',age:25}}">user-4 &nbsp; &nbsp;</router-link>

接收参数：

props:['id','name','age']

动态路由切换时的特点

动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用已经渲染过的路由组件（只是会修改路由参数值）。这样增加了程序的高效及时性；另一方面，组件的生命周期钩子回调函数将不会再次调用。