（十一）编程式导航
编程式的控制导航
说明
我们在编写页面跳转的时候并不只用超链接来控制页面的跳转，例如我们想在点击按钮的时候跳转页面，或者是在生命周期中跳转页面，就需要使用编程式的导航
一、有历史记录的跳转，可以返回 this.$router.push()
- 传递字符串路由
/**
* 编程式导航语法
* this.$router.push('路径')
*/
<button @click="$router.push(`/${blogPost.id}`)">查看全文</button>- 传递
name路由
{
path: '/',
component: BlogListPage,
name: 'blogList'
}
/**
* 语法
* this.$router.pauh({
* name: 'blogList',
* params: {
* id: 12
* }
* })
*/
<buttom @click="$router.push({name: 'blogList', params: {id: 12}})">查看全文</buttom>二、替换历史记录的最新一条 this.$router.replace
- 使用
replace跳转的路径他会替换掉历史记录的第一条，使用浏览器倒退的时候，会返回上一次使用replace跳转的页面
<button @click="$router.replace(`/${blogPost.id}`)">查看全文</button>三、前进页面和后退页面 this.$router.go(-/+ 1)
说明
上面的括号里面的数字是 -2 就是后退两步，+2 就是前进两步，传递 0 就是刷新当前页面，如果是超过了里面记录里面的条数就没有任何效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022年11月13日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录