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'})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 弹出框 引入另一个vue页面的示例代码

    vue 弹出框 引入另一个vue页面的示例代码

    这篇文章主要介绍了vue 弹出框引入另一个vue页面,这种方式适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue+threejs写物体动画之物体缩放动画效果

    vue+threejs写物体动画之物体缩放动画效果

    最近在vue中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue组件实践之可搜索下拉框功能

    vue组件实践之可搜索下拉框功能

    这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能,在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue3 PC端页面开发规范及说明

    Vue3 PC端页面开发规范及说明

    这篇文章主要介绍了Vue3 PC端页面开发规范及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue element修改el-select控件长度style=“width:XXpx“不生效的解决

    vue element修改el-select控件长度style=“width:XXpx“不生效的解决

    这篇文章主要介绍了vue element修改el-select控件长度style=“width:XXpx“不生效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue百度地图实现定位和marker拖拽监听功能

    Vue百度地图实现定位和marker拖拽监听功能

    这篇文章主要介绍了Vue百度地图实现定位和marker拖拽监听功能,实现思路非常简单,本文结合实例代码效果图给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue-cli3.0配置及使用注意事项详解

    vue-cli3.0配置及使用注意事项详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些?本文通过实战案例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-09
  • Vue $attrs & inheritAttr实现button禁用效果案例

    Vue $attrs & inheritAttr实现button禁用效果案例

    这篇文章主要介绍了Vue $attrs & inheritAttr实现button禁用效果案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue返回上一页面时不刷新问题及解决方案

    vue返回上一页面时不刷新问题及解决方案

    这篇文章主要介绍了vue返回上一页面时不刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 关于vue组件的更新机制 resize() callResize()

    关于vue组件的更新机制 resize() callResize()

    这篇文章主要介绍了关于vue组件的更新机制 resize() callResize(),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论