query参数
不打扰路由配置
传递(携带)参数
<!-- 跳转并携带query参数,to的字符串写法,记得加: -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
<!-- 跳转并携带query参数,to的对象写法,记得加: -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
接收(读取)参数
$route.query.id
$route.query.title
命名路由
路由切换路径过长时,简化路由跳转
给路由命名:
export default new VueRouter({
routes:[
//路由规则
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
// 给路径配置name属性进行命名
name:'detail',
path:'detail',
component:Detail
},
]
}
]
}
]
})
简化跳转(对象写法下才可以使用):
<!-- 简化前,需要写很长的路径 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
<!-- 简化后,可以用name属性代替路径跳转 -->
<router-link
:to="{
name:'detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
params参数
配置路由,声明接收params参数:
children:[
{
name:'detail',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
},
]
传递params参数:
<!-- 跳转并携带params参数,to的字符串写法,记得加: -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
<!-- 对象写法,必须使用name配置项 -->
<router-link
:to="{
name:'detail',
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
注意:路由携带params参数时,对象写法必须使用name配置项,不能使用path配置项
接收(读取)参数
$route.params.id
$route.params.title
路由的props配置
为了让路由组件在接收参数时更方便,只需要在props
中声明,不需要再重复写繁琐的计算属性
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail/:id/:title',
component:Detail,
//props的第一种写法,值为对象,该对象中所有的key-value值对都会以props的形式传给Detail组件
//props:{a:1,b:100}, 只能传递写死的值,不推荐
//props的第二种写法,为布尔值,为真时会将收到的所有params参数以props的形式传给Detail组件
//props:true 只可以接收params参数
//props的第三种写法,为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {id:$route.params.id,title:$route.params.title} //params参数与query参数都可以接收
}
},
]
}
Detail组件中接收(读取)参数
<li>消息id:{{id}}</li>
<li>消息内容:{{title}}</li>
props:['id','title']