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;

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

相关文章

  • 当vue路由变化时,改变导航栏的样式方法

    当vue路由变化时,改变导航栏的样式方法

    今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue中h5端打开app(判断是安卓还是苹果)

    vue中h5端打开app(判断是安卓还是苹果)

    这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue的index.html中获取环境变量和业务判断图文详解

    vue的index.html中获取环境变量和业务判断图文详解

    这篇文章主要给大家介绍了关于vue的index.html中获取环境变量和业务判断的相关资料,对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,需要的朋友可以参考下
    2023-09-09
  • vue如何截取字符串

    vue如何截取字符串

    这篇文章主要介绍了vue如何截取字符串,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

    vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

    这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • VUE+Element实现增删改查的示例源码

    VUE+Element实现增删改查的示例源码

    这篇文章主要介绍了VUE+Element实现增删改查的示例源码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • VUE项目中封装Echart折线图的方法

    VUE项目中封装Echart折线图的方法

    这篇文章主要为大家详细介绍了VUE项目中封装Echart折线图的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue 2阅读理解之initRender与callHook组件详解

    Vue 2阅读理解之initRender与callHook组件详解

    这篇文章主要为大家介绍了Vue 2阅读理解之initRender与callHook组件详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue + elementUI实现省市县三级联动的方法示例

    vue + elementUI实现省市县三级联动的方法示例

    这篇文章主要介绍了vue + elementUI实现省市县三级联动的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论