vue 路由的props

要点：

 

 如果我们用之前.$route.params.key来读取数据,但是数据一多就会出现不可复用,乱的问题

有非常多的重复 

 用计算属性也能解决，但是不同数据一多就要写大量的计算属性并没有把问题真正解决

 这时就要用到用到里面的全新配置props

之前我们也学过组件的props用于转入外部的数据

我配置路由的props时,哪个路由组件需要传入数据,就在哪个对应路由规则上定义props配置对象

 就相当于props里面的值都会以props的形式传给对应路由规则配置的组件

然后再detail组件里去 写props进行接受

但是这种写法基本不写,因为它是在路由配置里进行编写的,也就是写的是死数据

而使用props时,就会把path里面的占位符

组件中接收props和使用

 

相比与前面的写法这种方式就只需要在路由配置中加入一个props:true 然后通过params进行传参

但是这种写法只能进行params传参,不能实现query传参

第三种写法：写成一个函数形式

把props写成函数形式时,为一个回调函数,vue-router会帮你去执行这个函数,而且它还帮你获得了这个路由的$route就可以获得路由跳转传过来的参数,

也可以使用结构赋值来简化{query}相当于取出$route里面的query

 

 而如果使用结构赋值的连续赋值的话

绿色框相当于再在query里面取出id和title

 总结：