Vue3 router路由跳转传参Json数据,隐藏参数Url不显示跳转内容,使用History 来写,setup语法糖的写法

news2024/10/6 14:31:29

前言:Vue3中 Router的自2022-8-22 日后不能使用 params传参
—— 可以这么写,但是接收的时候会是空值
—— query可以用但不能用隐藏Url地址内的值,所以我们用History来写
history敲不出来的可以看最下面

这个相当于history模式父级调到子集后,子集访问历史查到的这个数据,省略了Url显示和刷新不存在的的问题

问题点:
1.JSON.stringify(Json)需要把内容转换一下不然不能传
2. JSON.parse(history.state.data)接收时也需要转换一下
3.router.push中的 state 必须是这个名字,不能用query

<script lang="ts" setup>

import { useRouter } from 'vue-router'
const router = useRouter();


  router.push(
        { 
           path: "/List",
           state:
           {
               data:JSON.stringify(json)
           }
        })


<script>

子集接收
history 直接敲 history.state

<script lang="ts" setup>

import { ref } from "vue";
const tableData = ref([]);

if (history.state.data) {
    tableData.value  = JSON.parse(history.state.data)
}

console.log(history.state);

<script>

接收后 console.log(history.state); 效果图
在这里插入图片描述
接收时Url路由不会有反应,直接省略了
在这里插入图片描述

外话:
一般来说用的都是History模式,加了就能使用,不知道的话可以自己去看一下,要是用的其他的话我就不知道了,没试过,知道的可以告诉我分享一下

一般命名都是router,可以去找找

在这里插入图片描述

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

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

相关文章

Linux文本三剑客之~~~awk 详细讲解 与date粗略讲解

目录 一. awk工作原理&#xff1a;1.1命令格式:1.2 awk常见的内建变量(可直接用)如下所示: 二 实验示例2.1 按行输出文本2.2按字段输出文本2.3 通过管道符双引号调用shell命令 date命令 一. awk工作原理&#xff1a; 逐行读取文本&#xff0c;默认以空格或tab键为分隔符进行分…

软件测试月薪2万,需要技术达到什么水平?

最近跟朋友在一起聚会的时候&#xff0c;提了一个问题&#xff0c;说一个软件测试工程师如何能月薪达到二万&#xff0c;技术水平需要达到什么程度&#xff1f;人回答说这只能是大企业或者互联网企业工程师才能拿到。也许是的&#xff0c;小公司或者非互联网企业拿二万的不太可…

网络性能监控(NPM)工具

网络是每个企业的支柱。即使在小型或企业级企业中&#xff0c;网络中断期间的生产力损失也可能导致巨大的损失。网络监控解决方案可帮助您预测潜在的中断并主动解决网络问题。这有助于维护无拥塞网络&#xff0c;使您的业务保持正常运行。这可以在网络监控工具的帮助下实现。网…

spring boot 完整后端接口案例

第一章 会员管理项目父模块搭建 1.1 创建模块mengxuegu-member mengxuegu-member 作为所有工程的父工程&#xff0c;用于管理项目的所有依赖。 1.2 添加pom依赖&#xff0c;pom.xml 文件位于&#xff1a;会员管理系统/03-配套资料/pom文件/member-pom.xml <?xml version&…

自建minio实现doris的快速备份与恢复

一.概述 doris支持通过腾讯云bos、阿里云oss、hdfs实现备份与恢复&#xff0c;但是我们公司doris部署在线下机房&#xff0c;如采用oss/bos, 大数据备份与恢复比较慢&#xff0c;会占用一定的带宽&#xff0c;如采用hdfs&#xff0c;担心小文件太多影响现有的hadoop集群。为了保…

C# Forecast 预测数据方法,MathNet.Numerics学习分享

Forecast 数据预测 /// <summary>/// 数据预测/// </summary>/// <param name"xValues">数据序列</param>/// <param name"yValues">数据值</param>/// <param name"forecastPoint">第N个预测序列<…

腾讯面试经验,岗位是C++后端

分享一篇腾讯面经&#xff0c;岗位是C后端&#xff0c;考察的内容是C、Redis、网络。 c shared_ptr的原理 答&#xff1a;内部的共享数据和引用计数实现 补充&#xff1a; shared_ptr多个指针指向相同的对象。shared_ptr使用引用计数&#xff0c;每一个shared_ptr的拷贝都…

【瑞萨RA系列FSP库开发】RASC+Keil的环境搭建

文章目录 一、获取资源包二、安装 Keil 软件、RA 芯片包和 RASC三、RASC 集成到 Keil四、使用 RASC 生成 Keil 工程五、通过 Keil 打开 RASC 的 FSP 配置器界面六、配置和编译 Keil 工程七、使用调试器下载程序 本节将介绍如何在Keil上开发瑞萨RA MCU &#xff08;如需了解 e2 …

元宇宙虚拟展馆和VR的关系与区别

元宇宙是指一个数字化的虚拟世界&#xff0c;这个世界由虚拟现实、增强现实等多种技术构建而成。这个世界中&#xff0c;人们可以用虚拟身份在其中自由穿梭&#xff0c;享受到与现实世界不同的多样化和极致体验。虚拟现实&#xff08;VR&#xff09;则是一种技术手段&#xff0…

一文吃透3类CSS复合选择器【案例演示】

书写CSS样式表时&#xff0c;可以使用CSS基础选择器选中HTML元素。但是在实际网站开发中&#xff0c;一个网页可能包含成千上万的HTML元素&#xff0c;如果仅使用CSS基础选择器是远远不够的。为此&#xff0c;CSS提供了儿种复合选择器&#xff0c;实现了更强、更方便的选择功能…

云原生技术的个人总结

文章目录 云原生概念Kubernetes容器和微服务k8s 服务网格边缘计算云边端 云原生概念 重点在以下三个方面 应用容器化面向微服务架构应用支持容器的编排调度 介绍&#xff1a; 这些技术能够构建容错性好、易于管理和便于观察的松耦合系统。结合可靠的自动化手段&#xff0c;…

公网远程访问公司管家婆ERP进销存管理系统 - 无需公网IP

文章目录 1.管家婆服务2. 内网穿透2.1 安装cpolar内网穿透2.2 设置远程访问 3. 固定访问地址4. 配置固定公网访问地址 管家婆辉煌系列产品是中小企业进销存、财务管理一体化的典范软件&#xff0c;历经十余年市场的洗礼&#xff0c;深受广大中小企业的欢迎&#xff0c;在国内及…

jQuery为什么还在发布新版本?

是的&#xff0c;你没有看错&#xff0c;jQuery发布了3.7.0&#xff0c;这个曾经告诉大家write less do more的JS库&#xff0c;这个已经被很多人遗忘的前端必备&#xff0c;曾经有本书叫《锋利的jQuery》。但现在谁还在每天做着jQuery的工作&#xff0c;谁还熟练jQuery的写法&…

linux环境安装使用tomcat详解

01-安装Tomcat # 0.下载tomcat http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8/v8.5.46/bin/apache-tomcat-8.5.46.tar.gz # 1.通过工具上传到Linux系统中 # 2.解压缩到/usr目录中 [rootlocalhost ~]# tar -zxvf apache-tomcat-8.5.46.tar.gz -C /usr/ -C 用来指…

高创伺服电机飞车问题

高创伺服电机飞车问题 兜兜转转又回到了伺服电机上&#xff0c;此次遇到的伺服电机飞车问题困扰了我有好长一段时间。在飞车发生时&#xff0c;除了电机飞速转动使设备抖动带来的物理冲击&#xff0c;也有身边其他人你一言我一语的情绪冲击。希望这个办法可以解决你的飞车问题…

数据湖与数据仓库区别

数据湖是近两年中比较新的技术在大数据领域中&#xff0c;对于一个真正的数据湖应该是什么样子&#xff0c;现在对数据湖认知还是处在探索的阶段&#xff0c;像现在代表的开源产品有iceberg、hudi、Delta Lake。 那对于数据湖应该是什么样子&#xff0c;先来看数据湖的作者AWS…

浏览器缓存学习记录

图片参考链接&#xff1a;https://blog.csdn.net/weixin_44258964/article/details/106444238 其他学习参考链接&#xff1a; 浏览器的强缓存和协商缓存 『网络篇』之手把手实现强缓存与协商缓存 本文主要是对浏览器的两种缓存模式进行记录学习。 浏览器缓存是什么&#xff…

Kali安装zenmap无法使用成功解决

1,找到 https://nmap.org下载 Optional Zenmap GUI (all platforms): zenmap-7.93-1.noarch.rpm 第二步(已安装的忽略):新版kali Linux不支持rpm命令,需要安装rpm格式转化工具fakeroot sudo apt-get install alien fakeroot 第三步:因为后面安装要是debian(deb)格…

商场布局图怎么画?用于商场内部导航的地图怎么做?

用于商场内部导航的地图怎么做&#xff1f;随着人们生活节奏的加快以及收入的提高&#xff0c;人们对于购物的体验要求也在不断的提升&#xff0c;比如以往在商场里面想要快速找到某个商家或者商品都是通过询问工作人员或者路人&#xff0c;非常麻烦&#xff0c;而且&#xff0…

权重老域名在哪里找-怎么找有历史权重域名做站

在哪挖老域名 在哪挖老域名&#xff1f;作为一个SEO人员&#xff0c;这是一个常见的问题。其实&#xff0c;有许多方法可以挖掘老域名&#xff0c;其中一种最有效的方法是使用147SEO老域名挖掘工具。 147SEO老域名挖掘工具是一种基于云平台的工具&#xff0c;专门为SEO人员提…