Vue2：router-link的replace属性

已于 2024-02-27 16:51:00 修改
阅读量468 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2024-02-25 17:22:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/136284670
版权
本文介绍了在Vue项目中，如何通过`router-link`的`replace`属性控制路由跳转，阻止浏览器回退到上一个组件，以及浏览器历史记录的两种写入方式：push和replace。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、情景说明

我们在用浏览器访问网站的时候
知道浏览器会记录访问的历史路径，从而，可以退回到之前的页面
那么，Vue项目中的路由组件，通过router-link跳转，也是可以退回的

这里，我们用replace来屏蔽退回的router-link
让回退按钮，无法返回到上一次访问到router-link跳转的组件

浏览器的历史记录有两种写入方式：
分别为push和replace
push是追加历史记录
replace是替换当前记录。
路由跳转时候默认为push

二、案例

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

<router-link replace class="li
最低0.47元/天 解锁文章
Vue | 路由【路由的简介 +嵌套（多级)路由+路由的query,params参数+命名路由+路由的props配置+router-link的replace属性】
不爱吃菜的菜菜的博客
07-24 1239
vue-rooter是vue的一个插件库，专门用来实现SPA应用。
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1255
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
【Vue】RouterLink的replace属性
DX390609的博客
07-17 417
2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push；简单来说，如果你用的是默认的push，你点击进入到下一个路由的时候可以返回到上一个路由；如果你用的是replace，你点击进入到下一个路由的时候，浏览器左上角不会有返回上一步。3、如何开启replace模式：在RouterLink后加replace即可。1、作用：控制路由跳转时操作浏览器历史记录的模式；
router-link的replace属性（控制路由跳转时操作浏览器历史记录的模式）
最新发布
qq_41273137的博客
03-20 917
消息标题：{{title}}</li><li>消息编号：{{id}}
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 2545
vue2进阶篇：vue-router之缓存路由组件
router-link 的replace属性
ykh12345678的博客
05-23 806
作用： 控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种方式，分别为push和replace，push是追加历史记录，raplace是替换当前历史记录。路由跳转的默认方是push。 如何开启replace模式： 在router-link上增加replace属性即可 ...
vue router-link的replace属性
Liberty_yes的博客
02-12 775
router-link的replace属性 vue中的replace属性是用来控制浏览器历史记录的
详解vue中router-link标签所必备了解的属性
10-17
当设置replace属性时，点击router-link相当于调用router.replace()方法，不会在浏览器的历史记录中留下记录，因此用户不能通过后退按钮返回到当前页面。 3. append属性：此属性用于处理相对路径。在使用相对路径时...
Vue学习第30天——router-link的push和replace属性
背心的博客
09-24 528
router-link的push和replace属性详解
router-link怎么使用
weixin_73060959的博客
08-11 1106
是 Vue Router 提供的一个组件，用于在 Vue 应用中创建导航链接。当点击时，它会根据to属性指定的路由地址（或路径名）来导航到对应的页面。这样做的好处是，它可以自动处理 URL 的更新和页面的渲染，而不需要你手动编写 JavaScript 代码来控制这些。
router-link 的replace属性 + 编程式路由导航
weixin_47075145的博客
10-14 992
1.作用：控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录保存在一个栈里面，刚打开浏览器在 指针指向栈底。3.浏览器的历史记录有两种写入方式：分别为 push 和 raplace， push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为 push 模式。
vue的router（二）router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫
weixin_47687315的博客
03-22 1851
1.router-link的replace属性 *给router-link添加replace属性后页签不能后退： 2.编程式路由导航 *作用：不借助router-link实现路由的跳转，让落跳转更加灵活： 3.缓存路由组件 *作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include='组件的名字'> <router-view></router-view> </keep-alive> ...
vue路由router-link的replace属性
weilaaer的博客
10-23 243
⒉.浏览器的历史记录有两种写入方式:分别为push和replace ，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。3.如何开启replace模式:
125_router-link的replace属性
述安的博客
12-09 214
<router-link>的replace属性： 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link replace ......>xxxx</router-link> ...
Web前端之Vue路由传参、接收方式、跳转、routerlink、replace、params、router、query、name、path、push、to
CSDN博客主页地址：https://mengjian.blog.csdn.net/
07-29 9370
Web前端之Vue路由传参、接收方式、跳转、routerlink、replace、params、router、query、name、path、push、to
Vue-router—router-link的replace属性
Guuiabc的博客
02-01 155
2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3. 如何开启```replace```模式：```News```### 8.``````的replace属性。replace模式的历史纪录会被覆盖，即不能进行回退操作。
Vue的＜router-link＞的replace属性
yh_zeng2的博客
04-12 393
Vue的<router-link>的replace属性
router-link的replace属性
yms869的博客
10-11 252
router-link的replace属性
vue2路由 router-link
09-21
router-link是Vue2中的一个组件，用于在页面中创建链接并实现路由导航。它是基于Vue Router实现的，可以通过设置不同的属性来配置链接的行为和样式。 router-link的tag属性用于指定渲染为哪种HTML标签，默认为a标签。通过设置tag属性，你可以将链接渲染为其他标签，比如button或div等。 router-link的replace属性用于指定是否在导航时替换历史记录，默认为false。当replace为true时，点击链接进行导航时，将直接替换当前的历史记录，而不会添加新的历史记录。 router-link的active-class属性用于指定当前激活链接的CSS类名。当对应的路由处于活动状态时，该类名将会被添加到链接上，让你可以为激活链接设置不同的样式。 修改router-link的router-link-active属性名称可以通过在Vue Router的配置中修改linkActiveClass字段来实现。默认情况下，激活链接会添加router-link-active类名，你可以通过修改linkActiveClass字段来指定其他的类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值