vue路由的params参数和props配置

1、params参数
（1）．配置路由，声明接收params参数

{
	path : ' / home ' ,
    component:Home,
    children:[
        { 
            path : ' news ',
            component: News
        },
        {
            component :Message,
            children : [
                {
                    name : 'xiangqing' ,
                    path: 'detail/:id/ :title',//使用占位符声明接收params参数
                    component:Detail
                }
            ]
        }
    ]
}

（2）传递参数

<! --跳转并携带params参数，to的字符串写法-->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<! --跳转并携带params参数，to的对象写法-->
<router-link
    :to="{
        name : 'xiangqing ',
        params : {
        	id:666,title: '你好'
        }
	}“
>跳转</ router-link>

特别注意:路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置!

（3）.接收参数:

$route.params.id
$route.params.title

2、路由的props配置

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

{
    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
        }
    }
}