Vue页面跳转后如何设置不留下历史记录？

本文共计469个文字，预计阅读时间需要2分钟。

目录 + Vue跳转后不记录历史记录 + Vue-router回退不记录历史记录 + 场景说明 + 处理方案 + 其他API跳转 + Vue跳转后不记录历史记录 + Vue路由跳转一般情况下是使用push，+ this.$router.push({ })

目录

• vue跳转后不记录历史记录
• vue-router回退不记录历史
• 场景说明
• 处理方案
• 其他api跳转

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;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。