vue3+vite模版框架 tabs右键刷新时丢失路由参数

news2024/12/24 8:38:42

问题:

标题栏的tabs的右键:刷新时,没有保存上一个页面传递过来的参数

分析:

TagView.vue刷新事件

function refreshSelectedTag(view: TagView) {
  console.log('|--执行刷新', view)
  tagsViewStore.delCachedView(view);
  const {fullPath} = view;
  nextTick(() => {
    router.replace({path: "/redirect" + fullPath});
  });
}

刷新获取到当前路由,没有把route里的路由参数对象拿出来,query

解决:

首先添加tag时,把query也添加到tag view里

//src\layout\components\TagsView.vue

function addTags() {
  if (route.meta.title) {
    tagsViewStore.addView({
      name: route.name as string,
      title: route.meta.title,
      path: route.path,
      fullPath: route.fullPath,
      affix: route.meta?.affix,
      keepAlive: route.meta?.keepAlive,
      query: route.query,
    });
  }
}

执行右键: 【刷新】事件把query拿回来

function refreshSelectedTag(view: TagView) {
  console.log('|--执行刷新', view)
  tagsViewStore.delCachedView(view);
  const {fullPath, query} = view;
  nextTick(() => {
    router.replace({path: "/redirect" + fullPath, query});
  });
}
在需要刷新:xx.vue页面

在onActivate地方重置获取一下,再执行刷新事件并请求最新的数据

onActivated(() => { //刷新时候保存query
  planInfor.value.id = route.query.id
  getDetailRequest()
})

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

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

相关文章

IDEA的使用(概念,安装,配置,)以及什么是字符集,模版

目录 Intellij IDEA IDE的概念 IntelliJ IDEA的安装 IntelliJ IDEA的使用 基本配置 JDK配置 创建Module 基本用法 字体配置 主题配置 字符集 设置IDEA默认字符集 注释模板 字符集 字符集简介 常见字符集 Intellij IDEA 我们不可能一直使用记事本之类变成&#…

Win7共享文件夹无法访问怎么办,win7共享文件夹访问不了

在win7系统中,用户可以通过局域网建立共享,然后将一些文件夹进行共享,方便用户访问。“共享文件”一般常用于办公室,某位同事的计算机用来和其它计算机间相互分享的文件夹。然而有时候需要访问共享文件时,却出现无法访问的情况,要怎么解决这样的问题呢?接下来,小编带来…

3D转换1111

1.三维坐标系 1.3D位移: translate3d(x,y,z)  translform:translateX(100px):仅仅是在x轴上移动  translform:translateY(100px):仅仅是在Y轴上移动  translform:translateZ(100px):仅仅是在Z轴上移动(注意&#xff1…

linux yum install jdk如何查找安装目录并配置环境变量

Linux服务已安装jdk1.8,此时需要在该服务器部署的应用要求依赖openJDK11,可按照以下命令进行安装openJDK11。 搜索查看安装包:yum search java-11-openjdk 如果能查找到安装包,执行以下安装命令进行安装。 安装openjdk11&#x…

互联网、因特网、万维网的区别

互联网 internet:凡是能彼此通信的设备组成的网络就叫互联网,即使只有两台计算机,无论以何种技术使其彼此通信,都叫互联网。所以,根据互联网的覆盖规模可以分为: 局域网(Local Area Network&am…

Java接口实战:模拟咖啡制作、订购与消费完整流程(day14)

定义接口: // 咖啡制作接口 interface CoffeeMaker { Coffee makeCoffee(String type); } // 咖啡店接口 interface CoffeeShop { void orderCoffee(String type, CoffeeConsumer consumer); } // 咖啡消费者接口 interface CoffeeConsumer { void …

预处理详解(一) -- 预定义符号与#define定义

目录 一. 预定义符号二. #define1.#define定义常量2.#define定义宏3.带有副作用的宏参数4.宏替换的规则5.宏和函数的对比 一. 预定义符号 %s _ _FILE_ _ //文件 %s _ _ DATE_ _ //日期 %s _ _ TIME_ _ //时间 %d _ _ LINE_ _ //行号 %d _ _ STDC_ _ //如果编译器支持 ANSI C,那…

python基础——异常捕获【try-except、else、finally】

📝前言: 这篇文章主要介绍一下python基础中的异常处理: 1,异常 2,异常的捕获 3,finally语句 🎬个人简介:努力学习ing 📋个人专栏:C语言入门基础以及python入门…

[图解]DDD领域驱动设计伪创新-通用语言01

0 00:00:01,420 --> 00:00:04,110 今天我们来说一个 1 00:00:04,390 --> 00:00:07,450 领域驱动设计的伪创新,通用语言 2 00:00:12,780 --> 00:00:13,960 通用语言 3 00:00:14,460 --> 00:00:14,830 4 00:00:14,830 --> 00:00:15,940 英文叫 5 0…

Python | Leetcode Python题解之第2题两数相加

题目: 题解: # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def addTwoNumbers(self, l1: Optional[ListNode], l2: Optiona…

阿里云服务器经济型e实例特点、适用场景介绍和问题解答

阿里云服务器ECS经济型e系列是阿里云面向个人开发者、学生、小微企业,在中小型网站建设、开发测试、轻量级应用等场景推出的全新入门级云服务器,CPU处理器采用Intel Xeon Platinum架构处理器,支持1:1、1:2、1:4多种处理器内存配比&#xff0c…

ADC--数模转换器的使用

目录 前言 ADC接口使用 配置准备 确定引脚编号 光敏电阻--PF7​编辑 ADC3_IN5 开始配置 实验进阶 MQ_3--酒精传感器、水位传感器、火焰传感器 前言 ADC(analog-digital conversion)顾名思义模拟数字转换器,把外界的譬如温度、湿度、酒精含量、水位、特殊光波等等的现实…

小狐狸JSON-RPC:wallet_addEthereumChain(添加指定链)

wallet_addethereumchain(添加网络) var res await window.ethereum.request({"method": "wallet_addEthereumChain","params": [{"chainId": "0x64", // 链 ID (必填)"…

数据结构 - 算法效率|时间复杂度|空间复杂度

目录 1.算法效率 2.时间复杂度 2.1定义 2.2大O渐近表示法 2.3常见时间复杂度计算举例 3.空间复杂度 3.1定义 3.2常见空间复杂度计算举例 1.算法效率 算法的效率常用算法复杂度来衡量,算法复杂度描述了算法在输入数据规模变化时,其运行时间和空间…

6.5物联网RK3399项目开发实录-驱动开发之LCD显示屏使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接:https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f LCD使用 简介 AIO-3399J开发板外置了两个LCD屏接口,一个是EDP,一个是LVDS,接口对应板…

Profinet转ModbusTCP:从站设备转换与集成案例

本案例旨在探讨如何将Modbus TCP设备数据成功地接入到西门子PROFINET网络中。为了实 现这一目标,我们将使用西门子S7-1200型PLC以及耐特森Profinet转ModbusTCP网关作为 关键设备。为了模拟Modbus从站,我们将使用电脑安装modbus poll软件。首先需要了解Pr…

PCL点云处理之重复随机采样一致性(RRANSAC法)平面拟合(二百三十七)

PCL点云处理之重复随机采样一致性(RRANSAC法)平面拟合(二百三十七) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 pcl::SAC_RRANSAC"是 PCL库中的一个方法,是 RANSAC 方法的改进版本,通过多次重复采样和模型拟合来提高鲁棒性。RRANSAC 的思想是在 RANSAC 的基…

从0开始搭建基于VUE的前端项目(一) 项目创建和配置

准备与版本 安装nodejs(v20.11.1)安装vue脚手架(@vue/cli 5.0.8) ,参考(https://cli.vuejs.org/zh/)vue版本(2.7.16),vue2的最后一个版本vue.config.js的配置详解(https://cli.vuejs.org/zh/config/)element-ui(2.15.14)(https://element.eleme.io/)vuex(3.6.2) (https://…

2024年天津仁爱学院退役大学生士兵专升本专业课报名确认安排

天津仁爱学院2024年高职升本科退役大学生士兵专业课报名确认及考试安排的通知 按照市高招办《2024年天津市高职升本科招生实施办法》(津招办高发〔2023〕14号)文件要求,天津仁爱学院2024年高职升本科退役大学生专业课考试报名、确认及考试工…

【C++】C到C++的入门知识

目录 1、C关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 2.2.1 加命名空间名称及作用域限定符 2.2.2 使用using将命名空间中某个成员引入 2.2.3 使用using namespace 命名空间名称引入 3、C输入&输出 4、缺省参数 4.1 缺省参数的概念 4.2 缺省参数的…