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,一经查实,立即删除!

相关文章

算法-位运算

题目&#xff1a;题目5 一个数组中有一种数出现K次&#xff0c;其他数都出现了M次&#xff0c; M > 1, K < M 找到&#xff0c;出现了K次的数&#xff0c; 要求&#xff0c;额外空间复杂度O(1)&#xff0c;时间复杂度O(N) 思路&#xff1a;遍历数组按位计数&#xff0c;不…

SRS关闭无人观看的流

这里需要使用到SRS自身自带的钩子回调功能&#xff0c;配置文件中有标注&#xff1a; Hook函数&#xff1a; 分为on_publish、on_play、on_stop、on_unpublish、on_dvr等类别&#xff1b; 其中主要介绍on_play、on_stop on_play&#xff1a; 主要用于用户在对srs拉流进行播…

十六进制数

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

Spring设计模式之工厂模式创建Bean对象

BeanFactory和Application是Spring容器中创建和管理Bean对象的接口&#xff0c;但是它们的实现方式不同。 BeanFactory&#xff1a; BeanFactory采用延迟初始化策略&#xff0c;只有应用程序向容器请求特定的Bean时才创建该Bean对象。它的启动速度很快&#xff0c;但在程序运…

MySQL、Redis、Nginx配置优化

文章目录 一、MySQL二、Redis三、Nginx 一、MySQL mysql.cnf [mysqld] binlog_cache_size 128K thread_stack 256K join_buffer_size 2048K max_heap_table_size 512Mdefault_storage_engine InnoDB performance_schema_max_table_instances 400 table_definition_cach…

leetcode hot100组合综合四

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

.net 微服务 服务保护 自动重试 Polly

1. 概要 实验服务保护&#xff0c;自动重新连接功能。 2.代码 2.1 重复工具 using Polly; using Polly.Retry; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Threading.Tasks;namespace WebApplication2 {pu…

c# DotNetty

对于 .NET 开发者来说&#xff0c;DotNetty 是一个开源、高性能的网络库&#xff0c;它是对 Java 平台上流行的 Netty 异步事件驱动网络应用程序框架的一个端口。DotNetty 适用于创建各种网络应用程序&#xff0c;如 IoT (物联网)、游戏服务器以及消息传递系统等。 以下是对 Do…

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

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

Redis命令和Redisson对象匹配列表

大家好&#xff0c;Redisson系列再发一文。 多克创新国庆福利继续发&#xff0c;有需要的可以前往官网了解详情&#xff01;&#xff01;&#xff01; Redis命令Redisson对象方法AUTHConfig.setPassword();APPENDRBinaryStream.getOutputStream().write()BITCOUNTRBitSet.ca…

嵌入式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 对…

数学家的趣闻轶事15则

目录 前言趣闻轶事15则参考文献 前言 有人的地方就有江湖&#xff0c;有江湖的地方就有故事。数学本身就是一个江湖&#xff0c;这个江湖也充满着血雨腥风和侠骨柔情&#xff0c;至今流传着各种各样的传说&#xff0c;其中不乏”马踏江湖潇潇事“&#xff0c;也有"何当共…

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编辑器还可以帮助用户重构、理解和优化代码&…

Mybatisplus 传参参数为自定义sql, 使用条件构造器作为参数

1 pom依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version> </dependency> 2 mapper 接口文件 List<TBookOrder> searchDiy(Param(Const…

centos docker jenkins 日志

在 CentOS 系统上运行 Docker 容器中的 Jenkins&#xff0c;查看日志的方法如下&#xff1a; 实时查看 Jenkins 容器的日志&#xff1a; 可以使用 docker logs 命令实时查看 Jenkins 容器的输出日志。 docker logs -f <jenkins_container_name_or_id>-f 参数表示跟随&…

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…

字符串变换最小字符串(C语言)

题目描述 给定一个字符串s&#xff0c;最多只能进行一次变换&#xff0c;返回变换后能得到的最小字符串&#xff08;按照字典序进行比较&#xff09;。 变换规则&#xff1a;交换字符串中任意两个不同位置的字符。 输入描述 一串小写字母组成的字符串s 输出描述 按照要求…

ADO.NET查询返回单个值

在ADO.NET中&#xff0c;如果你想要执行一个查询并返回单个值&#xff08;例如&#xff0c;一个聚合函数的结果或一个唯一记录的某个字段值&#xff09;&#xff0c;你可以使用SqlCommand对象的ExecuteScalar方法。ExecuteScalar方法返回查询结果集中的第一行的第一列的值&…