三种方式清除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 组件注册
Nov 20 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
javascript比较文档位置
2008/04/08 Javascript
jQuery 技巧小结
2010/04/02 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
介绍一下Python下range()函数的用法
2013/11/07 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
《荷花》教学反思
2014/04/16 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
python自动化八大定位元素讲解
2021/07/09 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers