vue路由跳转router-link清除历史记录的三种方式(总结)
更新时间：2022年04月09日 16:57:15 作者：一羊迁徙
这篇文章主要介绍了vue路由跳转router-link清除历史记录的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
路由跳转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'})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了springboot vue接口测试前端模块树和接口列表，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要介绍了vue中computed下使用箭头函数会报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。这篇文章主要介绍了vue组件TagsInput的相关知识,需要的朋友可以参考下2020-05-05
echarts在前端开发中实属必不可缺的大数据可视化工具,这篇文章主要为大家详细介绍了vue如何使用echarts实现柱状图动态排序效果,感兴趣的可以了解下2023-10-10
最近在项目开发中,就遇到了这个问题,Vue中如何使一个div铺满全屏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
这篇文章主要为大家介绍了简易vuex4核心原理及实现源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文主要介绍了在配置了mock数据之后在线上环境使用,主要通过在main.ts文件中注册和vite.config.ts文件夹中配置插件来实现,感兴趣的可以了解一下2025-01-01
本篇文章主要介绍了VUE2实现事件驱动弹窗示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue如何预览后端传来的二进制图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue cli3.0 引入eslint 结合vscode使用
这篇文章主要介绍了vue cli3.0 引入eslint 结合vscode使用，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论