Vue3 使用 Vue Router 时,params 传参失效

前言:

        在写项目的时候,使用了 vue-router 的 params 进行传参,但是在详情页面中一直获取不到参数。原因:Vue Router 在2022-8-22的那次更新后,使用这种方式在新页面上无法获取!

正文:

 在列表页进行路由跳转

在详情页获取params的值

 打印结果为空对象!!!

 解决方式:

 根据文档给出的解决方法,我选择第二种当时,通过pathquery进行传参;注意:query传参只能用路由表中的 path  ,并且所有参数都会显示在URL 地址上

 列表页:

 详情页:

总结:

vue3项目进行路由传参最好不要使用 params,可以使用

        1、path + query 进行传参,但是参数会显示在地址栏里

        2、将参数放在 pinia 或 vuex 仓库里

        3、使用动态路由匹配

        4、传递 state ,在新页面使用 History API 接受参数

        5、使用 meta 原信息方式传递

方式4实现代码:

 列表页:

详情页获取参数:

 控制台打印结果:

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

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

相关文章

从零开始做题:老照片中的密码

老照片中的密码 1.题目 1.1 给出图片如下 1.2 给出如下提示 这张老照片中的人使用的是莫尔斯电报机,莫尔斯电报机分为莫尔斯人工电报机和莫尔斯自动电报机(简称莫尔斯快机)。莫尔斯人工电报机是一种最简单的电报机,由三个部分组…

【笔记】从零开始做一个精灵龙女-拆uv阶段

目录 先回顾一下拆uv的基础流程吧 肩部盔甲分UV示例 手环UV部分 腰带UV部分 其它也差不多,需要删掉一半的就先提前删掉一半,然后把不需要的被遮挡的面也删掉 龙角UV 胸甲UV 侧边碎发UV 马尾UV 脸部/耳朵UV 特殊情况:如果要删一半再…

kafka的命令行操作

kafka-topics.bat 该命令行和主题相关 kafka启动后,默认端口为9092,可修改 找到kafka_2.13-3.6.2\bin\windows目录下的kafka-topics.bat,用cmd执行 按下会有提示,REQURIED代表为必输项 创建topic 创建一个名为test的topic队列 kafka-t…

绘制图形

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在前3节的实例中,我们一直绘制的都是直线,实际上,海龟绘图还可以绘制其他形状的图形,如圆形、多边形等…

FineReport聚合报表与操作

一、报表类型 模板设计是 FineReport 学习过程中的主要难题所在,FineReport 模板设计主要包括普通报表、聚合报表、决策报表三种设计类型。 报表类型简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 二、聚合报表 2-1 介绍 聚合报表指一个报表中包含多个…

STM32的SPI通信

1 SPI协议简介 SPI(Serial Peripheral Interface)协议是由摩托罗拉公司提出的通信协议,即串行外围设备接口,是一种高速全双工的通信总线。它被广泛地使用在ADC、LCD等设备与MCU间,使用于对通信速率要求较高的场合。 …

扩散模型 GLIDE:35 亿参数的情况下优于 120 亿参数的 DALL-E 模型

节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

LeetCode 算法:二叉树的层序遍历 c++

原题链接🔗:二叉树的层序遍历 难度:中等⭐️⭐️ 题目 给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)。 示例 1: 输入:roo…

TensorFlow开源项目

欢迎来到 Papicatch的博客 文章目录 🍉TensorFlow介绍 🍉主要特点和功能 🍈多语言支持 🍈灵活的架构 🍈分布式训练 🍈跨平台部署 🍈强大的工具链 🍈丰富的社区和生态系统 &a…

人工智能与物联网:融合创新驱动未来

引言 人工智能(AI)指的是计算机系统模拟人类智能的能力,包括学习、推理、问题解决、理解自然语言以及感知和响应环境的能力。AI技术涵盖了机器学习、深度学习、神经网络、自然语言处理等领域,广泛应用于图像识别、语音识别、自动驾…

FPGA学习笔记(5)——硬件调试与使用内置的集成逻辑分析仪(ILA)IP核

如果要对信号进行分析,可以使用外置的逻辑分析仪,但成本较高,对初学者来说没有必要,可以使用Xilinx Vivado内自带的逻辑分析仪IP核对信号进行分析,不过需要占用一定的芯片资源。 本节采用上一节配置的LED灯闪烁代码&a…

如何改善老年人的行走姿势以减少小碎步现象?

改善老年人行走姿势的方法 为了改善老年人的行走姿势并减少小碎步现象,可以采取以下几种方法: 平衡训练:通过使用单脚站立架、平衡板等器械,提高身体稳定性和协调性,增强核心稳定性及下肢肌肉力量,从而改善…

数据结构-顺序表的交换排序

顺序表的初始化 const int M 505;typedef struct{int key; //关键元素int others; //其他元素 }info;typedef struct{info r[M1]; int length(); //表长 }SeqList,*PSeqList; 冒泡排序 分析: 顺序表的冒泡排序和数组的冒泡排序的…

STM32定时器入门篇——(基本定时器的使用)

一、基本定时器的功能介绍: STM32F103的基本定时器有:TIM6、TIM7。基本定时器TIM6和TIM7各包含一个16位递增自动装载计数器,最大计数到2^16也就是65536,计数值为0~65535,其拥有的功能有:定时中断、主模式触…

深度学习21-30

1.池化层作用(筛选、过滤、压缩) h和w变为原来的1/2,64是特征图个数保持不变。 每个位置把最大的数字取出来 用滑动窗口把最大的数值拿出来,把44变成22 2.卷积神经网络 (1)conv:卷积进行特征…

Elasticsearch 数据提取 - 最适合这项工作的工具是什么?

作者:来自 Elastic Josh Asres 了解在 Elasticsearch 中为你的搜索用例提取数据的所有不同方式。 对于搜索用例,高效采集和处理来自各种来源的数据的能力至关重要。无论你处理的是 SQL 数据库、CRM 还是任何自定义数据源,选择正确的数据采集…

【Excel】单元格如何设置可选项、固定表头

设置可选项 固定表头:视图---冻结窗口

SD-WAN带宽对使用的影响及如何规划

SD-WAN(软件定义广域网)是一种创新技术,旨在优化和提升企业网络的性能、可靠性和安全性。带宽在SD-WAN的使用中起着关键作用,而确定SD-WAN专线所需的带宽大小需要综合考虑多个因素。本文将深入探讨SD-WAN带宽对使用的影响以及如何…

试析C#编程语言的特点及功能

行步骤,而不必创建新方法。其声明方法是在实例化委托基础上,加一对花括号以代表执行范围,再加一个分号终止语句。 2.3.3 工作原理 C#编译器在“匿名”委托时会自动把执行代码转换成惟一命名类里的惟一命名函数。再对存储代码块的委托进行设…

go语言day4 引入第三方依赖 整型和字符串转换 进制间转换 指针类型 浮点数类型 字符串类型

Golang依赖下载安装失败解决方法_安装go依赖超时怎么解决-CSDN博客 go安装依赖包(go get, go module)_go 安装依赖-CSDN博客 目录 go语言项目中如何使用第三方依赖:(前两步可以忽略) 一、安装git,安装程序…