vue跳转后不记录历史记录的问题

 更新时间:2022年09月21日 16:12:22   作者:武良神  
这篇文章主要介绍了vue跳转后不记录历史记录的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue跳转后不记录历史记录

vue路由跳转一般情况下是使用push,

 this.$router.push({
                path: "/testTeam/testTeam",
              
              });

若是特殊需求,页面跳转后不记录到历史记录中,将push改为replace即可

this.$router.replace({path: '/project_selection'})

vue-router回退不记录历史

场景说明

对于单页应用来说,经常会有登录后访问某个页面的场景。比如

/index -> /login -> /page1

但是在page1返回上一页时,会返回到登录页。回退路径为

/page1-> /login -> /index

因此需要进行跳过登录页的历史记录处理。

处理方案

1.router-link + history

<template>
   login页
   <router-link replace to="/page1">登录后访问page1</router-link>
</template>

此时在page1页的回退路径为

/page1 -> /index

2.编程式跳转

<template>
        login页
        <button @click="replaceJump">登录后访问page1</button>
</template>
    
<script setup lang='ts'>
    import {useRouter} from 'vue-router'
    const router = useRouter();
    // 传递全路径跳转
    const replaceJump = ()=>{
        router.replace('/page1')
    }
</script>
    
<style>
    
</style>

结果同上。

其他api跳转

此外,router对象还有其他跳转api使用说明如下

    /**
     * Go back in history if possible by calling `history.back()`. Equivalent to
     * `router.go(-1)`.
     */
    back(): ReturnType<Router['go']>;
    /**
     * Go forward in history if possible by calling `history.forward()`.
     * Equivalent to `router.go(1)`.
     */
    forward(): ReturnType<Router['go']>;
    /**
     * Allows you to move forward or backward through the history. Calls
     * `history.go()`.
     *
     * @param delta - The position in the history to which you want to move,
     * relative to the current page
     */
    go(delta: number): void;

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

相关文章

  • vue2中watch的用法(通俗易懂,简单明了)

    vue2中watch的用法(通俗易懂,简单明了)

    这篇文章主要给大家介绍了关于vue2中watch用法的相关资料,通过watch监听器,我们可以实时监控数据的变化,并且在数据发生改变时进行相应的操作,需要的朋友可以参考下
    2023-09-09
  • vue使用refs获取嵌套组件中的值过程

    vue使用refs获取嵌套组件中的值过程

    这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue + Echarts页面内存占用高的问题解决方案

    Vue + Echarts页面内存占用高的问题解决方案

    点击左侧的菜单可以切换不同的看板,有些看板页面中的报表比较多,用户多次切换后页面的内存占用可以上升为GB级,严重时导致页面内存溢出,使得页面崩溃,极大影响了用户体验,本文给大家介绍Vue + Echarts页面内存占用高的问题解决方案,感兴趣的朋友一起看看吧
    2024-02-02
  • vue+el使用this.$confirm,不能阻断代码往下执行的解决

    vue+el使用this.$confirm,不能阻断代码往下执行的解决

    这篇文章主要介绍了vue+el使用this.$confirm,不能阻断代码往下执行的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 关于vite proxy跨域问题的解决

    关于vite proxy跨域问题的解决

    这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3使用ref和reactive管理状态的代码示例

    Vue3使用ref和reactive管理状态的代码示例

    ref 和 reactive 是 Composition API 中用来声明响应式数据的两个核心函数,在 Vue 3 中,使用 setup 语法糖可以更简洁地使用这些功能,本文将探讨如何使用 ref 和 reactive 来管理状态,并解释它们之间的区别,需要的朋友可以参考下
    2024-09-09
  • Vue 父子组件的数据传递、修改和更新方法

    Vue 父子组件的数据传递、修改和更新方法

    下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解VUE中常用的几种import(模块、文件)引入方式

    详解VUE中常用的几种import(模块、文件)引入方式

    这篇文章主要介绍了详解VUE中常用的几种import(模块、文件)引入方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vuejs选中当前样式active的实例

    vuejs选中当前样式active的实例

    今天小编就为大家分享一篇vuejs选中当前样式active的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解nuxt sass全局变量(公共scss解决方案)

    详解nuxt sass全局变量(公共scss解决方案)

    这篇文章主要介绍了详解nuxt sass全局变量(公共scss解决方案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论