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