vue 路由的 router-link 的replace

最新推荐文章于 2024-04-28 13:49:25 发布
最新推荐文章于 2024-04-28 13:49:25 发布
阅读量537 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119256491
版权

要点：

 

当我们使用router-link的时候默认就是push模式

浏览器的历史记录就相当于栈,当前就相当于一个指针，使用的时push方式,不会对记录进行删除 

还有一种为replace模式,相当替换会把之前的历史进行替换掉

 

 

想要开启replace模式

简写就直接写成这样就行了 

也就是我们这边只把跳转news和message的设置replace,当时我们执行about home news messages 的顺序进行点击时,其历史记录存储是这样的

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题
11-21
首先在store中定义所需要的变量可以进行初始化，再定义一个方法，登录成功后A页面，跳转到B页面之前，需要直接调用store中存储数据的方法，全局可以使用 诸如以上所示，该问题，百度了好久，多亏群里大佬。 vue使用less报错的解决方法 安装less less-loader cnpm install less less-loader --save-dev app.vue是所有XXX.vue文件的根文件 所以webapp,的底部通常是在这里配置 h5的新增 标题 主题内容 固定的底部内容
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 2021
vue2进阶篇：vue-router之缓存路由组件
Vue Router中的replace与路由守卫
最新发布
yxh_live的博客
04-28 768
Vue Router中的replace与路由守卫
(VUE2 STEP3)用router-link替代a herf
weixin_45553150的博客
04-28 229
在vue2.0中，原来的v-link指令已经被组件替代了 组件支持用户在具有路由功能的应用中点击导航。 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。 其实我目前也不太明白为什么这么改?有什么好处?没办法,技术一直是演进的.过1\2年又会有新的东西出来,又得重新学.这类技术我也懒的深究,...
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_vue-router 用router-link代替a 标签，设置默认的路由
上海 彭彭
08-17 3736
之前 用 a标签 ，每次都需要在href 里面添加 #， 用router-link 可以避免。 <router-link to='/login' tag="span">登录</router-link> <router-link to='/registe' tag="span">注册</router-link> 我们想设置默认路由显示指定的...
详谈vue中router-link和传统a链接的区别
10-15
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue路由 遍历生成复数router-link的例子
10-16
今天小编就为大家分享一篇vue路由 遍历生成复数router-link的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-view-transition:使用scrollBehavior正确地进行超时转换
03-10
vue-router-view-transition 与scrollBehavior兼容的路由器视图的过渡包装器 安装 npm install vue-router-view-transition # or yarn add vue-router-view-transition 用法 该库导出一个组件和一个函数。 您需要...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
Vue2：router-link的replace属性
Brave_heart4pzj的博客
02-25 347
Vue
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 —— 进阶 vue-router 路由（二）（replace属性、编程式路由导航、缓存路由组件、路由的专属钩子）
HuoZhiyan 的博客
05-24 1605
编程式路由导航
Vue2中注册在router-link上事件无效解决方法
thinkingw770s的博客
08-22 1457
今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发， 后来测试发现，所有绑定在router-link中的事件都不会促发 此后查看了官方的文档，也并没有给出明确的说明： 代码如下： &lt;router-link @click="change"&gt;&lt;span&gt;{{item.text}}&lt;/span&gt;&lt;/...
router-link 绑定事件不生效
玲曦的博客
05-28 1096
在vue中绑定事件是一下这种方法： v-on:click=‘函数名称’; @click = ‘函数名称’; 这两种写法都是正常。 但是我们使用了 vue-router 路由时会使用 标签来代替 a 标签跳转。我们在 vue-router 标签绑定 @click 事件 。 <router-link to="/date" @click="nav_click">最新</router-link> methods: { nav_click: function() { co
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
weixin_56498069的博客
08-31 1234
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
VueRouter路由使用（二）
weixin_60968779的博客
03-27 751
认识vue-router、模式、嵌套、v-slot、路由导航守卫
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、付费专栏及课程。

余额充值