Vue2：router-link的replace属性

已于 2024-02-27 16:51:00 修改
阅读量347 收藏
点赞数 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来屏蔽退回的router-link
让回退按钮，无法返回到上一次访问到router-link跳转的组件

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

二、案例

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

<router-link replace class="list-group-item" active-class="active" to="/about">About</router-link>
生产队队长
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详谈vue中router-link和传统a链接的区别
10-15
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mmf-blog-vue2:mmf-博客vue2.0（vue2，vue-router，vuex）
04-29
mmf-blog vuejs 2.0 v2演示： ： 主要技术堆栈：vue2，vue2-router，vuex，webpack，babel，eslint其他版本React（水疗中心）： : vue2（spa）： ： vue2（pwa ssr）： : vue3（spa）： ： vue3（pwa ssr）： : 首先...
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 2021
vue2进阶篇：vue-router之缓存路由组件
vue路由router-link的replace属性
weilaaer的博客
10-23 185
⒉.浏览器的历史记录有两种写入方式:分别为push和replace ，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。3.如何开启replace模式:
router-link 的replace属性
ykh12345678的博客
05-23 735
作用： 控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种方式，分别为push和replace，push是追加历史记录，raplace是替换当前历史记录。路由跳转的默认方是push。 如何开启replace模式： 在router-link上增加replace属性即可 ...
router-link 的replace属性 + 编程式路由导航
weixin_47075145的博客
10-14 903
1.作用：控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录保存在一个栈里面，刚打开浏览器在 指针指向栈底。3.浏览器的历史记录有两种写入方式：分别为 push 和 raplace， push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为 push 模式。
vue的router（二）router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫
weixin_47687315的博客
03-22 1749
1.router-link的replace属性 *给router-link添加replace属性后页签不能后退： 2.编程式路由导航 *作用：不借助router-link实现路由的跳转，让落跳转更加灵活： 3.缓存路由组件 *作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include='组件的名字'> <router-view></router-view> </keep-alive> ...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue2 设置router-view默认路径的实例
12-01
在学习vue的时候，遇到很多问题，这里做一些总结，持续更新。 今天说一个问题，就是在学习vue的时候，从之前的1.0版本升级...import Router from 'vue-router' import goods from '../components/goods/goods' import r
vue router-link 默认a标签去除下划线的实现
01-18
补充知识：vue-router更改router-link点击时样式 默认类：router-link-active：可以通过在样式表中重新定义 基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/ 以上这篇vue router...
Vue-router—router-link的replace属性
Guuiabc的博客
02-01 95
2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3. 如何开启```replace```模式：```News```### 8.``````的replace属性。replace模式的历史纪录会被覆盖，即不能进行回退操作。
Vue的＜router-link＞的replace属性
yh_zeng2的博客
04-12 326
Vue的<router-link>的replace属性
router-link的replace属性
yms869的博客
10-11 177
router-link的replace属性
vue 路由的 router-link 的replace
MCCLS的博客
07-30 537
要点： 当我们使用router-link的时候默认就是push模式 浏览器的历史记录就相当于栈,当前就相当于一个指针，使用的时push方式,不会对记录进行删除 还有一种为replace模式,相当替换会把之前的历史进行替换掉 想要开启replace模式 简写就直接写成这样就行了 也就是我们这边只把跳转news和message的设置replace,当时我们执行about home news messages 的顺序进行点击时,其历史记录存储是这样的 ...
Vue知识点：router-link的replace属性
summer_cloudy的博客
03-15 132
【代码】Vue知识点：router-link的replace属性。
七、【Vue-Router】router-link标签的replace属性
天行健，君子以自强不息
08-07 273
router-link标签的replace属性
125_router-link的replace属性
述安的博客
12-09 164
<router-link>的replace属性： 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link replace ......>xxxx</router-link> ...
vue路由route详解（7）----router-link的replace属性
Canace_Xyxjjcaw的博客
03-28 546
点击router-link会有历史记录，但是记录历史记录的方式是push方式 默认开启的是push模式，还有一种模式是replace模式（即替换）
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
weixin_56498069的博客
08-31 1234
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
vue2路由 router-link
最新发布
09-21
router-link是Vue2中的一个组件，用于在页面中创建链接并实现路由导航。它是基于Vue Router实现的，可以通过设置不同的属性来配置链接的行为和样式。 router-link的tag属性用于指定渲染为哪种HTML标签，默认为a标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值