三种方式清除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——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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获取某个目录大小的代码
2008/09/10 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
BootStrap中
2016/12/10 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python是否适合网页编程详解
2019/10/04 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
django 模型中的计算字段实例
2020/05/19 Python
如何编写python的daemon程序
2021/01/07 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
七年级生物教学反思
2014/01/30 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
在redisCluster中模糊获取key方式
2021/07/09 Redis
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技