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

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

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页的回退路径为

_{http://www.cppcns.com/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
* `hihttp://www.cppcns.comstory.go()`.
*
* @param delta - The position in the history to which you want to move,
* relative to the current page
*/
go(delta: number): void;
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。}

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

目录