三种方式清除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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
php+mysql写的简单留言本实例代码
2008/07/25 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
linux下编译安装memcached服务
2014/08/03 PHP
分享php分页的功能模块
2015/06/16 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
浅谈Python中的数据类型
2015/05/05 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
写得不错的求职信范文
2014/07/11 职场文书
目标责任书格式
2014/07/28 职场文书
法院授权委托书范文
2014/08/02 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
redis 查看所有的key方式
2021/05/07 Redis