导航:即实现不同路由之间的切换
一、声明式导航(router-link)
1.使用
跳转到哪里,也就是to后面要写完整路径
实现切换:( active-class可配置高亮样式 )
<router-link
class="list-group-item"
active-class="active"
to="/home/message"
>Message</router-link
>
指定展示位置:
<router-view> </router-view>
2.路由传参
- 方式一
携带query参数,to的字符串写法
<router-link :to="`/home/message/detial?id=${ m.id }&title=${m.title}`">{{ m.title }}</router-link>
携带params参数,to的字符串写法
配置的时候要用占位符
path: 'detial/:id/:title',
<router-link :to="`/home/message/detial/${ m.id }/${m.title}`">{{ m.title }}</router-link>
- 方式二
携带query参数,to的对象写法
命名路由可以简化路由的跳转
<router-link :to="{
// name:'xiangqing',
path:'/home'
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
携带query参数,to的对象写法
注意:对象写法时不能使用path,一定要用name配置项
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
- 接收参数
{{ $route.router.id }}
$route.router.title
$route.params.id
$route.params.title
二、编程式导航(push|replace)
不借助router-link实现路由跳转,可以用其他元素,如button等,让路由跳转更灵活
1.使用
实现切换:
- 方式一
push:就像栈,一个一个进,再出
this.$router.push({
name: 'xiangqing',
query: {
id: m.id,
title: m.title
}
})
- 方式二
replace:总是替换前一个,最终结果只有最后一个路由
replaceShow(m) {
this.$router.replace({
name: 'xiangqing',
query: {
id: m.id,
title: m.title
}
})
}
跳转行为:
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
methods: {
back() {
this.$router.back()//前进
},
forward() {
this.$router.forward()//后退
},
test() {
this.$router.go(1)//可前进也可后退,数字表示前进几步
}
}
三、用声明还是编程式导航
router-link也可以只使用一个。当服务器返回数据后,可以循环出很多个router-link组件。
但是如果有1000+数据组件实例,会很耗内存,因此会出现卡顿现象。
所以此时用编程式导航。