69 路由的props配置

抛出问题

像这种写法，如果有一两个参数还好，但是如果有很多个参数需要接收，频繁的出现$route.params这种冗余代码，势必是不太好的，那么怎么可以让读取参数的时候简单点呢，不写这么多重复的东西

这时候就要借助路由的配置项props了

props属性

组件中也有props属性，主要是为了让组件接收外部传进来的参数

路由的props是为了让路由组件更方便的收到参数

哪个路由接收东西就给哪个路由配置props属性,关于props它有三种写法，三种写法不能同时出现，三选一

写法1 值为对象

值为对象，该对象中的所有key-value都会以props的形式传给Detail组件，这也是props最简单的写法，但是这种写法用的很少，因为传递的是死数据

写法2 值为布尔值

值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件，这种方式虽然确实简化了代码，但是只适用于接收params参数，对与query的参数是接收不到的

写法3 值为函数

这种写法最为强大和实用，把逻辑在路由配置中完成，并且支持query和params的两者方式

总结

作用：让路由组件更方便的收到参数

{
        name:'xiangqing',
        path:'detail/:id',
        component:Detail,
        //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
        // props:{a:900}
        //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
        // props:true
        //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
        props(route){
                return {
                        id:route.query.id,
                        title:route.query.title
                }
        }
}