Vue3 使用 Vue Router 时,prams 传参失效和报错问题

Discarded invalid param(s) “id“, “name“, “age“ when navigating

我尝试使用 prams 传递数据

<script setup>
import { useRouter } from 'vue-router'const router = useRouter()
const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({ name: 'detail', params })</script><template><el-button type="danger" @click="toDetail">查看情页</el-button>
</template>

在接收页面尝试渲染 prams 传递的数据:

<template><div>姓名:{{ route.params?.name }}</div><div>电话:{{ route.params?.phone }}</div><div>年龄:{{ route.params?.age }}</div>
</template><script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告

Vue Router 的警告

点开链接后发现了原因, 点击查看更新日志。

S1

S2

也就是说,从Vue Router的2022-8-22 这次更新后,我们使用上面的方式在新页面无法获取:

vue也给我们提出了解决方案:

  1. 使用 query 的方式传参

    只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。

    <script setup>
    import { useRouter } from 'vue-router'const router = useRouter()
    const query = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
    const toDetail = () => router.push({  path: '/detail', query })</script>
    <template><el-button type="danger" @click="toDetail">查看情页</el-button>
    </template>
    
  2. 将参数放在 pinia 或 vuex仓库里

  3. 使用动态路由匹配

  4. [传递 state,在新页面使用 History API 接收参数](#使用 History API 方式传递和接收)

  5. 使用 meta 原信息方式传递 (此方式更适用于路由守卫)

使用动态路由匹配

如果传递参数较少的情况下,可以尝试使用下面这种方式,只要修改一下path定义部分就可以了:

// params 传递的参数: { id: '1', name: 'ly', phone: 13246566476, age: 23 }{path: '/detail/:id/:name/:phone/:age',name: 'detail',component: () => import('@/views/detail/index.vue')
}

查看页面效果,控制台警告也消失了:

image-20230105162347660

注意,如果使用使用了这种动态路由匹配方式, path: '/detail/:id/:name/:phone/:age' ,中这三个参数你都必须传递,否则会报错:

image-20230105163743993

个人觉得这么写很鸡肋: 如果不把params参数写在路由路径中无法得到 params 参数,这种方式的params参数又会显示在地址栏。虽然不算弃用params, 但是每次把params参数写在路由路径中是很麻烦的一件事。

使用 History API 方式传递和接收

在跳转前的页面使用 state 参数:

<script setup>
import { useRouter } from 'vue-router'const router = useRouter()const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({ name: 'detail', state: { params } })</script><template><el-button type="danger" @click="toDetail">查看情页</el-button>
</template>

跳转的后页面接收:

<template><div>{{ historyParams }}</div>
</template><script setup lang="ts">const historyParams = history.state.params
console.log('history.state', history.state)
</script>

image-20230105164119984

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

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

相关文章

快速使用BRTR公式出具的大模型Prompt提示语

Role:文章模仿大师 Background: 你是一位文章模仿大师&#xff0c;擅长分析文章风格并进行模仿创作。老板常让你学习他人文章后进行模仿创作。 Attention: 请专注在文章模仿任务上&#xff0c;提供高质量的输出。 Profile: Author: 一博Version: 1.0Language: 中文Descri…

半边数据结构学习

半边数据结构学习 一、网格数据结构二、半边数据结构顶点(Vertex)半边(HalfEdge)面片(Face) 三、OpenMesh 相关代码拓扑关联对象遍历 四、OpenFilpper 相关代码HoleInfo类孔洞检测孔洞信息HoleFiller类孔洞补全 一、网格数据结构 对于表面网络来说&#xff0c;其关键在于拓扑&…

【MySQL系列】VARCHAR的底层存储

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

python-亲和数(赛氪OJ)

[题目描述] 古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220 的所有真约数(即不是自身的约数)之和为&#xff1a; 1245101120224455110&#xff1d;284 。 而 284 的所有真约为 1 、 2 、 4 、 71 、 142 &#xff0c;加起来恰好为 220 。人们对这样的数感到很惊奇&a…

颐养优选元宇宙

颐养优选是一个专注于为中老年人提供高品质养老服务的品牌或平台。它通常涵盖了一系列服务和产品&#xff0c;旨在帮助老年人享受健康、舒适、有尊严的晚年生活。这些服务可能包括但不限于以下几个方面&#xff1a; ###健康管理 -**定期体检**&#xff1a;提供定期的身体健康检…

如何搞定美国TikTok直播网络?

在全球范围内&#xff0c;TikTok已经积累了超过30亿次的下载量&#xff0c;月活跃用户达到13亿以上&#xff0c;支持75种语言&#xff0c;覆盖了150多个国家和地区。这一庞大的流量池吸引了众多国内电商人尝试在TikTok上进行业务拓展。本文将探讨如果要在美国运营TikTok直播&am…

ruoyi定时任务使用

使用没有什么特别的&#xff0c;不再赘述&#xff0c;可参见前端文档 或下面的文章 ruoyi若依定时任务的基本使用_若依框架定时任务怎么用-CSDN博客 只说一下被调度任务的建立 1、在调用的类上添加Component("后期在调用任务创建用的伪类的名称") 称为伪类是因为…

MySql性能调优03-[SQL优化]

SQL优化 MySQL优化SQL优化-不要写select *SQL优化-小表驱动大表&#xff0c;而不是大表驱动小表SQL优化-连接查询代替子查询SQL优化-提升group by的效率SQL优化-使用limitSQL优化-union all代替unionSQL优化-join的表不宜过多 MySQL优化 trace工具 set session optimizer_trac…

把Docker的虚拟磁盘文件移动到别的盘符

今天清理C盘空间&#xff0c;发现一个很大的文件 ext4.vhdx 足有 15G 之多&#xff0c;发现这个是Docker的虚拟磁盘文件&#xff0c;于是在网上找到移到它的办法&#xff0c;使用 PowerShell 执行下面命令 查看Docker状态和版本 wsl -l -v 关闭Docker服务 wsl --shutdown …

Kithara与OpenCV (一)

Kithara使用 OpenCV 库 目录 Kithara使用 OpenCV 库简介需求和支持的环境构建 OpenCV 库使用 CMake 进行配置以与 Kithara 一起工作 使用 OpenCV 库设置项目运行 OpenCV 代码图像采集和 OpenCV自动并行化限制和局限性1.系统建议2.实时限制3.不支持的功能和缺失的功能4.显示 Ope…

Python 数据类型与基础概念

在 Python 编程中&#xff0c;理解和掌握数据类型和基础概念是至关重要的。这些概念不仅帮助我们更有效地编写代码&#xff0c;还使我们能够创建更加复杂和功能丰富的应用程序。本文将详细介绍 Python 中的基本数据类型及其相关操作&#xff0c;并涵盖一些重要的基础概念。 1.…

数字化打造行业生态产业链,企业新增益全知道

在当今数字化时代&#xff0c;利用数字化打造行业生态产业链成为企业发展的重要战略选择。那么&#xff0c;这一举措究竟能为企业带来哪些新增益呢&#xff1f;让我们一探究竟。 一、运营效率大幅提高 数字化技术就像一条神奇的纽带&#xff0c;将产业链上的各个环节紧紧相…

Python函数 之 匿名函数

1.概念 匿名函数: 使用 lambda 关键字 定义的表达式&#xff0c;称为匿名函数. 2.语法 lambda 参数, 参数: 一行代码 # 只能实现简单的功能&#xff0c;只能写一行代码 # 匿名函数 一般不直接调用&#xff0c;作为函数的参数使用的 3.代码 4.练习 # 1, 定义匿名函数, 参数…

32路串口服务器 应用领域

32路串口服务器在多个领域有着广泛的应用&#xff0c;以下是详细的应用实例&#xff1a; 一、工业自动化 在工业自动化领域&#xff0c;32路串口服务器发挥着举足轻重的作用。传统的工业设备往往采用串口通信方式&#xff0c;而串口服务器能够将这些设备接入网络&#xff0c;…

C++ 开源库

1 PDFium PDFium 是一个开源的 PDF 渲染和处理库&#xff0c;最初由 Foxit Software 开发&#xff0c;并于2014年捐赠给了 Chromium 项目。PDFium 旨在为各种应用程序提供高效、灵活的 PDF 渲染和操作功能。 2 代码地址 https://github.com/chromium/pdfium 主要特性 渲染…

集训 Day 3 总结 虚树 + dfs tree + 基环树

虚树 虚树&#xff0c;顾名思义是 只关注原树上的某些 关键点&#xff0c;在保留原树祖孙关系的前提下建出的一棵边数、点数大大减少的树 适用于优化某些在整棵树上进行 d p dp dp、 d f s dfs dfs 的问题 通常是题目中出现多次询问&#xff0c;每次给出树上的一些关键点&a…

11网络层-分组转发算法

路由 分组转发 1&#xff09;从数据报的首部提取目的主机的IP地址D&#xff0c;得出目的网络地址N 2&#xff09;若N就是与此路由器直接相连的某个网络地址&#xff0c;则进行直接交付&#xff0c;不需要经过其他路由器&#xff0c;直接将数据报交付给目的主机&#xff08;这…

人为因素:为什么网络安全不仅仅关乎技术

关注公众号网络研究观获取更多最新内容。 我们生活在一个生活与技术日益紧密交织的世界。但在构建防火墙和安装防病毒软件时&#xff0c;我们常常会忘记一个关键因素&#xff1a;人的行为。 网络犯罪分子正是利用了人为因素&#xff0c;利用巧妙的心理战术绕过最强大的安全措…

【MySQL基础篇】事务

事务简介 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 典型事例&#xff1a;银行转账操作 假设张三向李四进行转账…

Python:正则表达式相关整理

最近因为一些原因频繁使用正则表达式&#xff0c;因为以前系统整理过关于正则表达式的相关知识&#xff0c;所以这里仅记录使用期间遇到的问题。 本文内容基于re包 1. match和search方法的区别 在Python中&#xff0c;re.search和re.match都是用于匹配字符串的正则表达式函数&a…