三种方式清除vue路由跳转router-link的历史记录

三种方式清除vue路由跳转router-link的历史记录

Posted in Vue.js onApril 10, 2022

路由跳转router-link清除历史记录

1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数。

router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push。

2.this.\$router.push这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

那在我们使用路由跳转的时候如何去掉历史记录呢?

官方文档提供了如下三种方式

1.使用router-link标签时去掉历史记录:加上replace属性

<router-link to='/project_selection' replace class='btn_none' tag="a">项目列表</router-link>

2.使用this.\$router.push标签时去掉历史记录:加上replace属性,默认值为false

this.$router.push({path: '/project_selection',replace:true})

3.使用this.\$router.replace标签时去掉历史记录

this.$router.replace({path: '/project_selection'})

所有内容源自于官网:vue路由核心插件

vue跳转后不记录历史记录

vue路由跳转一般情况下是使用push,

 this.$router.push({
                path: "/testTeam/testTeam",
              });

若是特殊需求,页面跳转后不记录到历史记录中,将push改为replace即可

this.$router.replace({path: '/project_selection'})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
vue判断按钮是否可以点击
Apr 09 #Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 #Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 #Vue.js
You might like
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Django时区详解
2019/07/24 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
运动会表扬稿范文
2015/05/05 职场文书