位置: IT常识 - 正文

Vue Router4 ,prams 传参失效和报错问题

编辑:rootadmin
Vue Router4 ,prams 传参失效和报错问题 Vue3 使用 Vue Router 时,prams 传参失效和报错问题

推荐整理分享Vue Router4 ,prams 传参失效和报错问题,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

我尝试使用 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的2022-8-22 这次更新后,我们使用上面的方式在新页面无法获取:

vue也给我们提出了代替方案:

使用 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>Vue Router4 ,prams 传参失效和报错问题

将参数放在 pinia 或 vuex仓库里

使用动态路由匹配

传递 state,在新页面使用 History API 接收参数

使用 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')}

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

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

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

使用HistoryAPI方式传递和接收

在跳转前的页面使用 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.paramsconsole.log('history.state', history.state)</script>

本文链接地址:https://www.jiuchutong.com/zhishi/298565.html 转载请保留说明!

上一篇:性能优化之-事件代理(性能优化有什么用)

下一篇:OpenAI发布GPT-4;目前最完整的ChatGPT资源库;中文版提示词工程指南;AI颠覆播客体验;ChatGPT引发的10大职业危机 | ShowMeAI日报(openai发布时间)

  • qq群课堂学生如何连麦(qq群课堂学生如何分享屏幕)

    qq群课堂学生如何连麦(qq群课堂学生如何分享屏幕)

  • 华为Mate40有几种颜色(华为mate40有几种颜色)

    华为Mate40有几种颜色(华为mate40有几种颜色)

  • 小米6和小米5的区别(小米6和小米5的屏幕区别)

    小米6和小米5的区别(小米6和小米5的屏幕区别)

  • 拼多多下单返5元什么意思(拼多多下单返50元是真的吗)

    拼多多下单返5元什么意思(拼多多下单返50元是真的吗)

  • pon灯闪烁是欠费了吗(pon灯一闪一闪连不上网什么原因)

    pon灯闪烁是欠费了吗(pon灯一闪一闪连不上网什么原因)

  • 打印机显示打印成功但是打不出来怎么办(打印机显示打印机状态不可用,请检查电源和线缆连接)

    打印机显示打印成功但是打不出来怎么办(打印机显示打印机状态不可用,请检查电源和线缆连接)

  • 苹果笔记本能装windows吗(苹果笔记本能装office吗)

    苹果笔记本能装windows吗(苹果笔记本能装office吗)

  • 华为的微信分身在哪里设置(华为的微信分身为什么会显示登录异常)

    华为的微信分身在哪里设置(华为的微信分身为什么会显示登录异常)

  • 苹果7p进入刷机模式按什么键(苹果7p刷机模式怎么进去)

    苹果7p进入刷机模式按什么键(苹果7p刷机模式怎么进去)

  • 显卡怎么换(笔记本换显卡怎么换)

    显卡怎么换(笔记本换显卡怎么换)

  • 关闭共同关注功能是什么意思(什么叫关闭共同关注功能)

    关闭共同关注功能是什么意思(什么叫关闭共同关注功能)

  • qq语音通话可以回放吗(qq语音通话可以变声音吗)

    qq语音通话可以回放吗(qq语音通话可以变声音吗)

  • 华为移动数据怎么切换(华为移动数据怎么关闭)

    华为移动数据怎么切换(华为移动数据怎么关闭)

  • 美版xsmax支持电信吗(美版xsmax支持移动4g吗)

    美版xsmax支持电信吗(美版xsmax支持移动4g吗)

  • crr一ul00是什么型号手机(crr-ul20)

    crr一ul00是什么型号手机(crr-ul20)

  • 腾讯会员用qq可以登录几个(腾讯会员用qq可以几个人用)

    腾讯会员用qq可以登录几个(腾讯会员用qq可以几个人用)

  • vivo怎么用sd卡的内存(vivo 怎么用sd卡)

    vivo怎么用sd卡的内存(vivo 怎么用sd卡)

  • 手机电为什么越充越少(手机充电越充越少怎么办华为)

    手机电为什么越充越少(手机充电越充越少怎么办华为)

  • 华为plcal00什么型号(华为plcal00是什么型号手机)

    华为plcal00什么型号(华为plcal00是什么型号手机)

  • cad2019如何进入经典模式(cad怎么进su)

    cad2019如何进入经典模式(cad怎么进su)

  • 订阅号助手怎么注销账号(订阅号助手怎么上传视频)

    订阅号助手怎么注销账号(订阅号助手怎么上传视频)

  • 微信辅助能取消吗(微信辅助取消辅助还能再申请吗)

    微信辅助能取消吗(微信辅助取消辅助还能再申请吗)

  • qq乐币在哪里看(qq 乐币)

    qq乐币在哪里看(qq 乐币)

  • 实况怎么拍久一点(实况怎么拍的久)

    实况怎么拍久一点(实况怎么拍的久)

  • iphone8要贴钢化膜吗(iphone8p需要贴钢化膜吗)

    iphone8要贴钢化膜吗(iphone8p需要贴钢化膜吗)

  • window7和8和10的区别在哪(win 8和win 7有什么区别)

    window7和8和10的区别在哪(win 8和win 7有什么区别)

  • opencv训练自己的模型,实现特定物体的识别(opencv训练模型教程)

    opencv训练自己的模型,实现特定物体的识别(opencv训练模型教程)

  • 小规模减免增值税要交企业所得税吗
  • 小规模减免税款的账务处理
  • 投资性房地产出售时公允价值变动损益
  • 资本公积转实收资本要交税吗
  • 股东转让股权公司如何做账
  • 认缴后怎么才算实缴
  • 购买福利用品
  • 城建税计提与缴纳分录
  • 报税盘金税盘领的发票能通用吗
  • 保证金利息收入怎么算
  • 企业清算需要什么
  • 已认证发票红冲进项税分录
  • 投资性房地产的处置账务处理
  • 现金支票作废需要签字吗
  • 一般企业和行政事业单位的资产负债表是否一样
  • 预缴物业费是否符合法律规定
  • 代办会议费是否允许差额纳税
  • 装修公司怎么交钱
  • 营改增后增值税暂行条例实施细则
  • 财务费用应计入什么账户
  • 航天金税盘费用怎么做账
  • 快速查看财务费用借贷有误的方法
  • 所得税新规定
  • 企业所得税是当期收入吗
  • 分公司注销分配表
  • 税法对开办费的怎么汇算清缴
  • 工会收到单位拨款怎么办
  • 金蝶迷你版不能期末结账怎么办
  • 有关于秋天的诗句
  • app data文件夹
  • 管理人员预借差旅费会计分录怎么写
  • 政府的扶持资金是否缴税
  • win10分辨率调整
  • 隐藏资源管理器窗口
  • 电脑桌面换壁纸的软件
  • 民间非营利组织会计账务处理
  • win10无法连接应用商店
  • 增值税发票销货清单哪里领
  • 商业汇票计入什么科目技能高考
  • 福利部门领用原材料进项税额可以抵扣吗
  • 外币交易是什么意思
  • php生成随机6位数
  • 金蝶kis迷你版银行存款二级科目
  • GPT-4 手画设计稿 直接生成前端页面
  • 房屋折旧方法有哪些
  • 公司投资一家公司然后再投资
  • 企业所得税应纳税所得额300万以下
  • 服务什么行业
  • 发票金额和打款金额不一致怎么办
  • 劳务派遣差额会计分录
  • 体检费专票可以抵扣吗
  • 物业管理费开票类目
  • js怎么存储数据
  • 帝国cms灵动标签 PHP变量文章ID加减1
  • phpcms怎么样
  • 非营利组织免征企业所得税的通知
  • 固定资产出售通过什么科目
  • 企业研发费用率怎么算
  • 增值税专用发票有几联?
  • 销售货物没有开票的会计分录
  • 应付账款挂账
  • 建筑业发票可以开工程施工吗
  • vidaa 破解
  • os10.8.5升级不了
  • win10系统玩lol弹出来
  • 服务器centos7
  • 如何找回windows删除的文件
  • react native community
  • react常用框架
  • cmd进入控制面板代码
  • opengl常用函数库
  • androidstudiosdk
  • 同一个文件夹中的文件可以同名吗
  • shell脚本 -ne 0
  • bootstrap页头
  • jquery 输出
  • iframe嵌套页面滚动事件
  • 安徽国税app
  • 个体户税务三方协议必须签吗
  • 稽查查补税款享受增值税免税优惠吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设