Vue2:router-link的replace属性

一、情景说明

我们在用浏览器访问网站的时候

知道浏览器会记录访问的历史路径,从而,可以退回到之前的页面

那么,Vue项目中的路由组件,通过router-link跳转,也是可以退回的

这里,我们用replace来屏蔽退回的router-link

让回退按钮,无法返回到上一次访问到router-link跳转的组件

浏览器的历史记录有两种写入方式:

分别为pushreplace
push是追加历史记录
replace是替换当前记录。

路由跳转时候默认为push

二、案例

开启replace模式:给router-link添加replace属性即可

html 复制代码
<router-link replace class="list-group-item" active-class="active" to="/about">About</router-link>
相关推荐
hoLzwEge几秒前
团队协作的隐藏利器:.vscode 完全指南
前端·前端框架
labixiong2 分钟前
TypeScript 7.0 编译器用 Go 重写,速度暴增10倍——背后到底做了什么?
前端·javascript·go
WaywardOne3 分钟前
Flutter组件化方案(AI总结)
前端·flutter·ai编程
玉宇夕落4 分钟前
原子化编程”:Tailwind CSS 核心原理
前端
是小李呀9 分钟前
解决“Error: The project seems to require yarn but it‘s not installed”报错
前端
weedsfly10 分钟前
一个电商价格计算案例,带你学会前端开发中的责任链模式
前端·javascript·面试
__sjfzllv___11 分钟前
在职前端Leader学习/转行 AI Agent -DAY10
前端
沉迷学习日益消瘦15 分钟前
8 UI 组件库与设计系统:Token 驱动 + 暗色模式 + 4 种主题色
前端
CodeSheep30 分钟前
有这4个迹象,你就该离职了!
前端·后端·程序员
用户0595401744630 分钟前
把大模型记忆回归测试从手工检查换成 Playwright+VCR,误判率从 40% 降到 0
前端·css