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-B
	  BackB() {
		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.fullPath
				sessionStorage.setItem("viewProjectFromPathSession", from.fullPath);
			  }else{
				vm.fromPath = sessionStorage.getItem("viewProjectFromPathSession");
			  }
		  })
	  },
 init(){
		if (this.processFromPath) {
		this.fromPath = this.processFromPath;
	  }
activated() {
	  this.init()
	},

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑文件误删除如何恢复?2024最新三种恢复方法

我们在使用电脑的过程中&#xff0c;随着时间的不断推移&#xff0c;渐渐的我们会发现C盘内存空间不足了。这是因为我们很多文件都默认存储在C盘&#xff0c;所以导致C盘空间不足&#xff0c;电脑运行越来越慢。那么电脑哪些文件可以删除&#xff0c;电脑删除的东西怎么恢复&am…

Istio复习总结:xDS协议、Istio Pilot源码、Istio落地问题总结

1、xDS协议 1&#xff09;、xDS是什么 xDS是一类发现服务的总称&#xff0c;包含LDS、RDS、CDS、EDS以及SDS。Envoy通过xDS API可以动态获取Listener&#xff08;监听器&#xff09;、Route&#xff08;路由&#xff09;、Cluster&#xff08;集群&#xff09;、Endpoint&…

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息&#xff01;我想通过openai公司的chatgpt3.5来了解一下关于sora的技术信息&#xff0c;结果呢&#xff0c;它竟然回答不知道sora是什么。看来&#xff0c;sora的语料库信息还未来得及加入chatgpt3.5的训练模型中。 如图…

Linux——网络通信TCP通信常用的接口和tcp服务demo

文章目录 TCP通信所需要的套接字socket()bind()listen()acceptconnect() 封装TCP socket TCP通信所需要的套接字 socket() socket()函数主要作用是返回一个描述符&#xff0c;他的作用就是打开一个网络通讯端口&#xff0c;返回的这个描述符其实就可以理解为一个文件描述符&a…

外包干了3个多月,技术退步明显。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

ElasticSearch高级功能

目录 ES数据预处理 Ingest Node Ingest Node VS Logstash Ingest Pipeline Painless Script ES文档建模 Elasticsearch中处理关联关系 对象类型 嵌套对象(Nested Object) 父子关联关系(Parent / Child ) ES数据预处理 Ingest Node Elasticsearch 5.0后&#xff0c;…

从可靠性的角度理解 tcp

可靠性是 tcp 最大的特点。常见的用户层协议&#xff0c;比如 http, ftp, ssh, telnet 均是使用的 tcp 协议。可靠性&#xff0c;即从用户的角度来看是可靠的&#xff0c;只要用户调用系统调用返回成功之后&#xff0c;tcp 协议栈保证将报文发送到对端。引起不可靠的表现主要有…

频段划分学习射频知识的意义

一、射频电路设计与低频电路设计的不同点 随着频率提高&#xff0c;相应电磁波的波长与变得可与分立电路元件的尺寸相比拟时&#xff0c;电阻、电容和电感这些元件的电响应&#xff0c;将偏离他们的理想频率特性。以 WIFI 2.4G 频段为例&#xff0c;当频率为 2437MHz&#xff0…

【QT】QFile读取.txt文本文件时,中文乱码问题(已解决)

目录 0.背景 1.修改方法 0.背景 项目读取一个【.txt】文本文件&#xff0c;显示到下拉框中&#xff0c;其中含有中文&#xff0c;在读取中文相关字段时会出现乱码&#xff0c;代码和显示如下 .txt文本内容如下&#xff08;显示到下拉框时&#xff0c;我做了分割处理&#xff…

代码随想录 Leetcode509. 斐波那契数

题目&#xff1a; 代码&#xff08;首刷自解 2024年2月19日&#xff09;&#xff1a; class Solution { public:int fib(int n) {if (n < 2) return n;/*三个数表示加法算式里的 加数 加数 和*//*初始化*/int leftVal 0;int rightVal 1;int sum 0;for (int i 2; i <…

智慧城市的新宠儿:会“思考”的井盖

在城市化飞速发展的今天&#xff0c;我们或许未曾过多地关注那些平凡却至关重要的井盖。它们无声地矗立在城市的每个角落&#xff0c;守护着深藏于地下的城市生命线&#xff0c;然而&#xff0c;这些井盖并未满足于传统的角色&#xff0c;它们正逐步融入智慧城市的宏大画卷中&a…

【Go语言】Go语言的数据类型

GO 语言的数据类型 Go 语言内置对以下这些基本数据类型的支持&#xff1a; 布尔类型&#xff1a;bool 整型&#xff1a;int8、byte、int16、int、uint、uintptr 等 浮点类型&#xff1a;float32、float64 复数类型&#xff1a;complex64、complex128 字符串&#xff1a;st…

Git基本操作(1)

Git基本操作&#xff08;1&#xff09; 初始化git本地仓库git本地仓库配置git config user.name 和git config user.emailgit config --unset user.name和git config --unset user.emailgit config --global 认识工作区&#xff0c;暂存区&#xff0c;版本库更深层次理解 git a…

Leetcoder Day15| 二叉树 part04

语言&#xff1a;Java/C 110.平衡二叉树 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 输入&#xff1a;root [3,9,20,null,null,15,…

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出 本文章的第三弹&#xff0c;由于LangChain本文不支持直接使用通义千问API进行多轮对话和流式输出&#xff0c;但是自建知识库呢&#xff0c;还需要LangChain,因此我尝试了一下&#xff0c;自建知识库用LangCh…

OpenAI最新Sora视频学习与生成的技术分析与最新体验渠道

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言OpenAI体验通道Spacetime Latent Patches 潜变量时空碎片, 建构视觉语言系统…

Unity之闪电侠大战蓝毒兽(简陋的战斗系统)

目录 &#x1f3a8;一、创建地形 &#x1f3ae;二、创建角色 &#x1f3c3;2.1 动画 &#x1f3c3;2.2 拖尾 &#x1f3c3;2.3 角色控制 ​&#x1f3c3;2.4 技能释放 &#x1f3c3;2.5 准星 &#x1f4f1;三、创建敌人 &#x1f432;3.1 选择模型 &#x1f432;3.…

UI美化stylesheet

一、网上找到自己喜欢的图标 大家可以每个图标类型找出三种不同的颜色&#xff0c;方便后续美化效果&#xff0c;这里我每种只找了一个。&#xff08;随便找的&#xff0c;最后效果不好看&#xff09; 将这个文件夹复制到项目的文件夹中。 然后右键Add New…选择QT&#xff0c…

小迪安全27WEB 攻防-通用漏洞SQL 注入Tamper 脚本Base64Jsonmd5 等

#知识点&#xff1a; 1、数据表现格式类型注入 2、字符转义绕过-宽字节注入 3、数字&字符&搜索&编码&加密等 #参考资料&#xff1a; https://www.cnblogs.com/bmjoker/p/9326258.html 扫描&#xff0c;利用工具等都不会自动判断数据类型&#xff0c…

常见面试题:TCP的四次挥手和TCP的滑动窗口

说一说 TCP 的四次挥手。 挥手即终止 TCP 连接&#xff0c;所谓的四次挥手就是指断开一个 TCP 连接时。需要客户端和服务端总共发出四个包&#xff0c;已确认连接的断开在 socket 编程中&#xff0c;这一过程由客户端或服务端任意一方执行 close 来触发。这里我们假设由客户端…