js-Vue Router 中的方法,父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转解决

1.常用的方法

        在 Vue Router 中,有一些常用的方法用于实现路由导航和管理。以下是一些常见的 Vue Router 方法及其作用:

  1. pushrouter.push(location, onComplete, onAbort)

    • 作用:向路由历史记录中添加一个新条目,并导航到指定的路由。
    • 示例:this.$router.push('/new-route')
  2. replacerouter.replace(location, onComplete, onAbort)

    • 作用:替换当前路由为指定的路由,不会在历史记录中留下新条目。
    • 示例:this.$router.replace('/new-route')
  3. gorouter.go(n)

    • 作用:前进或后退指定步数的历史记录条目。
    • 示例:this.$router.go(-1) // 后退一页
  4. backrouter.back()

    • 作用:后退一页,相当于 go(-1)
    • 示例:this.$router.back()
  5. forwardrouter.forward()

    • 作用:前进一页,相当于 go(1)
    • 示例:this.$router.forward()
  6. resolverouter.resolve(location, current, append)

    • 作用:解析给定的位置(location)到一个完整的地址对象。
    • 示例:this.$router.resolve('/about')

这些方法可以通过 this.$router 对象来访问,通常在 Vue 组件中使用。它们提供了对路由器的操作和导航功能,可以帮助您实现页面间的切换、历史记录管理等功能。

2.问题描述

        父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转。

BC中形成死循环,由于跳转记录了来时的路径一旦由a->b :返回记录路径为toA ,b->c:返回路径为toB,从c返回到b后 返回路径为toC。形成B与C死循环。

所以关键为:在B中时记录唯一由其他页面跳转到B的路径在存入返回路径时进行判断排除从C返回到B路径。在C返回到B时使用  this.$router.replace({path}),replace替换当前路由为指定的路由,不会在历史记录中留下新条目。

(1)A跳转到B

 toB(row) {let path = 'home/B'this.$router.push({path,})},

  (2)   B返回A

 BackA() {let path = this.fromPath;this.$router.replace({path})},
beforeRouteEnter(to, from, next) {next(vm => {// 表示非C返回if (to?.query?.proInfo && 0 < from.fullPath.length&&from.path==from.fullPath) {// 传入参数'proInfo'表示项目入口进入vm.fromPath = from.fullPath// setItem()方法存储 存储sessionStorage.setItem("viewProjectFromPathSession", from.fullPath);}else if(from.path){}else{// sessionStorage.getItem 读取 vm.fromPath = sessionStorage.getItem("viewProjectFromPathSession");}})},
 init(){if (this.processFromPath) {this.fromPath = this.processFromPath;}

activated() {this.init()},

在B中路由守卫,缓存记录路由跳转路径

  (3)  B跳转到C

        进行携带参数标识index

      toC(row) {let path = 'home/C'this.$router.push({path,query: { proInfo: row,index:2},})},

 (4)C返回B

 // C-BBackB() {let path = this.fromPath;this.$router.replace({path})},
	  beforeRouteEnter(to, from, next) {next(vm => {if (to?.query?.proInfo && 0 < from.fullPath.length) {// 传入参数'proInfo'表示项目入口进入vm.fromPath = from.fullPathsessionStorage.setItem("viewProjectFromPathSession", from.fullPath);}else{vm.fromPath = sessionStorage.getItem("viewProjectFromPathSession");}})},
 init(){if (this.processFromPath) {this.fromPath = this.processFromPath;}
activated() {this.init()},

在C中路由守卫,缓存记录路由跳转路径

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十六进制数

1.做一个收电费程序&#xff0c;要求输入使用的电的度数&#xff08;整数&#xff09;以及电费单价&#xff08;实数&#xff09;&#xff0c;输出总的用电费用。 2.提示并输入一个小写字母数据&#xff0c;输出其对应的ASCII值&#xff0c;以及该小写字母对应的大写字母。 3.提…

leetcode hot100组合综合四

本题中&#xff0c;是要求nums中求的总和为target的排列数&#xff0c;因为题中说了&#xff0c;元素顺序不同&#xff0c;则可以视为不同的结果之一。 所以&#xff0c;根据对背包问题的总结&#xff0c;本题中元素可以重复使用&#xff0c;是完全背包并且需要求排列数&#…

Redis之缓存击穿问题解决方案

文章目录 一、书接上文二、介绍三、解决方案1. 单例双检锁2. 缓存预热和定时任务 一、书接上文 Redis之缓存雪崩问题解决方案 二、介绍 缓存击穿就是大量并发访问同一个热点数据&#xff0c;一旦这个热点数据缓存失效&#xff0c;则请求压力都来到数据库。 三、解决方案 1…

嵌入式Qt 计算器核心算法_1

一.表达式分离算法分析 二.分离算法实现 QCalculatorDec.cpp #include "QCalculatorDec.h"#include <QDebug>QCalculatorDec::QCalculatorDec() {m_exp "";m_result "";QQueue<QString> r split("9.11 ( -3 - 1 ) * -5 &…

C#,整数转为短字符串(Short string)的加解密算法与源代码

1 整数转为短字符串的应用 网站生成的动态 URL 往往以内容序列号id为标识与参数&#xff0c;比如&#xff1a; http://www.jerry.com/tom.aspx?id1 使用 Web Rewrite&#xff0c;可以实现网页静态化&#xff0c;称为&#xff1a; http://www.jerry.com/content/1.html 对…

Centos安装图形化桌面环境

1.使用root远程登录最小化安装的虚拟机 2.执行命令yum groupinstall "X Window System" 这是安装窗口系统 3.执行命令yum grouplist" 检查安装的软件可可以安装的软件 4.执行命令yum groupinstall "Server with GUI" 这是安装图形化界面 5.执行命令sy…

抛弃chatgpt,使用微软的Cursor提升coding效率

Whats Cursor? Cursor编辑器是一个基于GPT-4的代码编辑器&#xff0c;它可以根据用户的自然语言指令或者正在编辑的代码上下文为用户提供代码建议&#xff0c;支持多种编程语言&#xff0c;如Python、Java、C/C#、go等。Cursor编辑器还可以帮助用户重构、理解和优化代码&…

P1605 迷宫

题目传送门&#xff1a;P1605 迷宫 前言 dfs迷宫题&#xff0c;是一道很好的练手模板题 这道题一定要回溯&#xff01;回溯&#xff01;&#xff01; 代码 #include<bits/stdc.h> using namespace std; int n,m,t; int sx,sy,fx,fy; int lx,ly; int a[10][10]{0},ans…

国内最全的AIGC大模型软件都是免费的,不比chatgpt香吗?我都为你准备好了,又可以提前下班了

无极低码 &#xff1a;https://wheart.cn 豆包(云雀大模型)、文心一言、悟空、星火、百度文库、360智脑、天宫AI、智谱清言(GLM大模型)、百川模型(百川智能)、日日新(商汤)、上海人工智能实验室&#xff08;书生通用大模型&#xff09;、夸克。 国内最全的AIGC大模型软件都是…

mysql 2-21

约束的分类 添加约束 查看表约束 非空约束 唯一性约束 复合的唯一性约束 只要有一个字段不重复&#xff0c;就可以添加成功 主键约束 自增列 mysql 8.0具有持久化&#xff0c;重启服务器会继续自增 外键约束 创建外键 关联必须有唯一性约束&#xff0c;或者是主键 约束等级 …

MySQL篇之undo log和redo log

一、持久化时服务器宕机 缓冲池&#xff08;buffer pool&#xff09;: 主内存中的一个区域&#xff0c;里面可以缓存磁盘上经常操作的真实数据&#xff0c;在执行增删改查操作时&#xff0c;先操作缓冲池中的数据&#xff08;若缓冲池没有数据&#xff0c;则从磁盘加载并缓存&a…

我是如何从功能测试成功转岗测试开发的?记录下我的面试经验

由于这段时间我面试了很多家公司&#xff0c;也经历了之前公司的不愉快。所以我想写一篇文章来分享一下自己的面试体会。希望能对我在之后的工作或者面试中有一些帮助&#xff0c;也希望能帮助到正在找工作的你。 一 找工作 壹&#xff0f; 我们总是草率地进入一个自己不了解…

mac拼图软件有哪些?推荐5款拼图软件

mac拼图软件有哪些&#xff1f;在数字图像处理中&#xff0c;拼图软件扮演着至关重要的角色。对于Mac用户来说&#xff0c;选择一款功能强大、操作简便的拼图软件是提升工作效率和创作体验的关键。本文将为你介绍五款优秀的Mac拼图软件&#xff0c;帮助你轻松完成图片拼接、制作…

WEB APIs (3)

事件对象 事件对象有事件触发时的相关信息&#xff0c;如点击事件中事件对象储存了鼠标点在哪个位置的信息 场景&#xff1a; 用户按下了哪个键&#xff0c;按下回车键可以发布新闻 鼠标点击了哪个元素&#xff0c;从而做哪些操作 参数e为事件对象 常用属性 type 获取当前…

如何用微软画图把1280X720的图片压缩成4:3?

最近在看20多年前的电视剧&#xff0c;视频截图是1280X720&#xff0c;比例失调。 如何压缩成4:3&#xff1f; 4 / 3 W / 720 W 720 X 4 / 3 960 打开画图&#xff0c;调整大学和扭曲&#xff08;Ctrl W&#xff09;&#xff0c;依据选择像素&#xff0c;取消保持纵横比…

【C++】类和对象---const成员,取地址及const取地址操作符重载,static成员

目录 ⭐const成员 ⭐取地址及const取地址操作符重载 ⭐static成员 ⭐概念 ⭐特性 ⭐const成员 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何…

Nginx服务介绍与部署管理

目录 一、Nginx相关介绍 1. 概述 2. 优缺点 3. 零拷贝技术 4. I/O模型相关概念 5. 网络I/O模型 5.1 阻塞型I/O模型 5.2 非阻塞型I/O模型 5.3 多路复用I/O型 5.4 信号驱动式I/O模型 5.5 异步I/O模型 6. 事件驱动模型 7. Nginx与Apache区别 二、Nginx部署和使用 1…

哪些工具可以改变手机电脑网络IP地址?

在互联网时代&#xff0c;网络已经成为了我们日常生活中不可或缺的一部分。然而&#xff0c;随着网络的普及和技术的不断发展&#xff0c;网络安全问题也日益凸显。为了保护个人隐私和信息安全&#xff0c;我们需要了解一些工具可以改变手机电脑网络IP地址的知识。 首先&#x…

【Java面试】MQ(Message Queue)消息队列

目录 一、MQ介绍二、MQ的使用1应用解耦2异步处理3流量削峰4日志处理5消息通讯三、使用 MQ 的缺陷1.系统可用性降低:2.系统复杂性变高3.一致性问题四、常用的 MQActiveMQ:RabbitMQ:RocketMQ:Kafka:五、如何保证MQ的高可用?ActiveMQ:RabbitMQ:RocketMQ:Kafka:六、如何保…

stm32——hal库学习笔记(串口<一>)

这里写目录标题 一、数据通信的基础概念&#xff08;了解&#xff09;1.1&#xff0c;串行/并行通信1.2&#xff0c;单工/半双工/全双工通信1.3&#xff0c;同步/异步通信1.4&#xff0c;波特率1.5&#xff0c;常见的串行通信接口 二、串口(RS-232)&#xff08;熟悉&#xff09…