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>
相关推荐
粥里有勺糖13 小时前
视野修炼第133期 | Native 回春了?
前端·github·agent
aichitang202413 小时前
前端小skill
前端·人工智能·算法·ai·前端框架
前端·柱子14 小时前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端·html·canva可画
葡萄城技术团队14 小时前
SpreadJS V19.2新特性揭秘:功能区键盘提示
前端
计算机魔术师14 小时前
AI 幻觉导致的错误情报险些引发美军拦截中国船只
前端
万物智能14 小时前
SARADC模数转换—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端
VXbishe15 小时前
【课程设计】基于SpringBoot的乡村政务服务系统的设计与实现-计算机毕设77011
javascript·vue.js·spring boot·python·php·课程设计·政务
志尊宝15 小时前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5
shmily麻瓜小菜鸡15 小时前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
aixingpan15 小时前
aixingpan.cn API开发文档:api_docs_bichart_natalvssolar_return2接口指南
前端·php