动态路由

动态路由

定义:我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如:我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。

一个『路径参数』使用冒号:标记;可以在一个路由中设置多段『路径参数』

动态路由的传参

1、params传参

定义动态路由

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

 传输参数

<router-link to=" /user/2/bob/20">user-2 &nbsp; </router-link><router-link to="/user/3/mary/21">user-3</router-link>

接受参数

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

 

2、props传参

值为布尔值的形式

接收参数：path: ['id', ' name ' , ' age ' ]

值为函数的形式

两者接收参数的区别：params传参用{{}}接收，props传参为数组形式的

query传输参数花括号ID冒号