路由的 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                }        }}