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>
相关推荐
一 乐6 分钟前
助农平台|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·ecmascript·springboot
vivo互联网技术8 分钟前
浅谈 AI 搜索前端打字机效果的实现方案演进
前端·vue·dom
●VON10 分钟前
Electron 小游戏实战:太空打砖块(Space Breakout)
前端·javascript·electron
新晨43710 分钟前
Vue 3 定时器清理的最佳实践
javascript·vue.js
重铸码农荣光11 分钟前
深入理解 JavaScript 原型机制:从“如何拿到小米 SU7”说起
前端·javascript
Zyx200714 分钟前
深入 JavaScript 事件机制:从冒泡到事件委托的高效实践
javascript
乐观的用户15 分钟前
搞懂虚拟列表实现原理与步骤
前端·vue.js
Heo15 分钟前
Webpack高级之常用配置项
前端·javascript·面试
华仔啊31 分钟前
10分钟搞定!SpringBoot+Vue3 整合 SSE 实现实时消息推送
java·vue.js·后端
Mike_jia1 小时前
DBSyncer:开源数据同步中间件全景实战指南
前端