vue-router 回退不记录历史

最新推荐文章于 2024-04-08 14:39:17 发布

原创最新推荐文章于 2024-04-08 14:39:17 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue-router 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue.js单页应用中处理登录后跳转和历史记录的两种方法：通过`router-link`配合`replace`属性，以及使用编程式跳转的`router.replace()`。这两种方式可以确保在从登录页登录后直接跳转到目标页面，避免回退到登录页。此外，还提到了Vue Router的其他API如`back()`、`forward()`和`go()`用于导航历史。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、场景说明

二、处理方案

1.router-link + history

2.编程式跳转

三、其他api跳转

一、场景说明

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

/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;