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>
相关推荐
whyfail7 分钟前
Vue原理(暴力版)
前端·vue.js
Bigger13 分钟前
Coco AI 技术演进:Shadcn UI + Tailwind CSS v4.0 深度迁移指南 (踩坑实录)
前端·css·weui
踢球的打工仔17 分钟前
jquery的基本使用(3)
前端·javascript·jquery
前端无涯17 分钟前
Trae的使用
前端·ide·trae
WG_1723 分钟前
Linux:进程控制
前端·chrome
[seven]29 分钟前
React Router TypeScript 路由详解:嵌套路由与导航钩子进阶指南
前端·react.js·typescript
无我Code1 小时前
前端-2025年末个人总结
前端·年终总结
徐同保1 小时前
js 点击按钮 把文本转成文件并下载下来
开发语言·javascript·ecmascript
VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue敬老院管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计