vue跳转后不记录历史记录的问题
作者:武良神 时间:2023-07-02 17:03:38
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;
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
来源:https://blog.csdn.net/weixin_52361730/article/details/119967454
标签:vue,跳转,历史记录
0
投稿
猜你喜欢
Pycharm基本操作及调试代码
2022-08-13 08:38:55
CSS应用的必要步骤:样式重设
2008-06-11 13:29:00
简单介绍Python中的decode()方法的使用
2021-01-05 23:47:31
python面向对象之类的继承详解
2022-03-20 18:22:22
Python中处理unchecked未捕获异常实例
2022-08-03 23:49:54
Python Flask-Login模块使用案例详解
2021-10-14 21:01:17
Golang中Gin框架的使用入门教程
2024-05-09 09:32:27
python实战小游戏之考验记忆力
2023-02-23 14:29:54
ASP.NET MVC中两个配置文件的作用详解
2024-05-13 09:17:08
python实现跳表SkipList的示例代码
2022-04-05 05:01:53
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2023-04-12 03:34:40
Python3.5.3下配置opencv3.2.0的操作方法
2021-06-20 19:43:53
Python return语句如何实现结果返回调用
2021-06-06 21:13:51
python如何使用replace做多字符替换
2022-10-23 01:26:59
Python学习之字符串常用方法总结
2021-12-19 02:19:46
彻底理解Python中的yield关键字
2021-02-23 16:31:42
Java操作MongoDB数据库示例分享
2023-06-30 11:25:03
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2023-04-01 15:20:05
asp如何读取一个文件内容?
2009-11-19 17:23:00
js创建jsonArray传输至后台及后台全面解析
2024-05-03 15:57:47