目录
五、<router-link>的replace属性
一、路由的query参数
1.传递参数
<!-- 跳转路由并携带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:XXX,
title:'你好'
}
}">
跳转
</router-link>2.接收参数
$route.query.id
$route.query.title二、命名路由
1.作用
可以简化路由的跳转。
2.如何使用
1.给路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello',//给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}2.简化跳转
<!-- 简化前，需要写完整路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{
{name:'hello'}}">跳转</router-link>
<!-- 简化写法配合传递参数 -->
<router-link
:to={
name:'hello',
query:{
id:666,
title:'你好'
}
}>
跳转
</router-link>三、路由的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四、路由的props配置
作用：让路由组件更方便的收到参数
{
name: 'xiangqing',
path: 'detail/:id/:title',
component: Detail,
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true
//props的第三种写法，值为函数
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
}五、<router-link>的replace属性
1.作用
控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式
分别为 push 和 replace , push 是追加历史记录，replace 是替换当前记录。路由跳转的时候默认为push
3.如何开启replace模式
<router-link replace......>News</router-link>