不借助
<router-link>
进行路由跳转操作,更加灵活和方便!
1. 作用
通过 API 的方式,不借助 <router-link>
进行路由操作
2. 写法
1)跳转页面
- 跳转路由页面,并保留在历史记录中
push
中的配置参数和router-link
中的to
属性配置的参数一致
// xxx.vue
...
export default {
methods: {
navigateTo() {
this.$router.push({
name: 'home',
path: '/home',
query: { ... }
})
}
}
}
2)回退
- 回退至上一个路由页面(与浏览器的后退类似)
// xxx.vue
...
export default {
methods: {
back() {
this.$router.back()
}
}
}
3)前进
- 前进至下一个路由页面(与浏览器的前进类似,前提是有可以前进的页面的话)
// xxx.vue
...
export default {
methods: {
forward() {
this.$router.forward()
}
}
}
4)按步数前进或回退
go(x)
:该方法接收一个参数,正数表示前进x步
,负数为后退x步
// xxx.vue
...
export default {
methods: {
go() {
this.$router.go(5)
}
}
}
5)替换当前路由,并跳转
使用
$router.push
的情况下,现有记录A -> B
,此时通过push
跳转到 C,则历史记录中有:A -> B -> C
;使用
$router.replace
的情况下,现有记录A -> B
,此时通过replace
跳转到 C,则历史记录中只会存留A -> C
的记录
// xxx.vue
...
export default {
methods: {
replaceTo() {
this.$router.replace({
name: 'home',
path: '/home',
query: { ... }
})
}
}
}
提示:在
<router-link>
中,通过配置replace
属性来实现 [替换路由] 模式,写法:<router-link replace>
3. 总结
- 编程式路由导航与
<router-link>
的区别<router-link>
最终会编译成<a>
标签;编程式路由导航支持通过非<a>
标签编写的路由跳转事件(如 button)<router-link>
需要提前编写并占位;编程式路由导航可以 灵活 地在业务逻辑需要的地方进行跳转
更多相关文章,推荐阅读来补充知识体系~
【Vue | 补洞 | 15】路由和路由器,傻傻分不清
【Vue | 补洞 | 16】嵌套路由
【Vue | 补洞 | 17】路由传参 & 路由prop配置
【Vue | 补洞 | 19】路由守卫