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

这篇具有很好参考价值的文章主要介绍了Vue Router4 ,prams 传参失效和报错问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

也就是说,从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 接收参数

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

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

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

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

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

个人觉得这么写很鸡肋: 如果不把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.params
console.log('history.state', history.state)
</script>

Vue Router4 ,prams 传参失效和报错问题文章来源地址https://www.toymoban.com/news/detail-422907.html

到了这里,关于Vue Router4 ,prams 传参失效和报错问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • node.js下载安装和报错大全(express、淘宝镜像、webpack、Vue)

    目录 一、概述 二、操作步骤 (一)下载node.js (二) 安装node.js (三)查看环境变量 (四)查看版本信息 (五)新建全局下载包和缓存包位置 (六)配置环境变量 (七)安装express(内嵌http模块) 安装成功 安装失败 解决办法一(最好的办法)  解决办法二(其次) (八

    2024年02月01日
    浏览(75)
  • Vue Router不要再使用params传参了,params获取不到参数,官方删除params传参

    之前说过,vue路由传参有两种方式,分别是 query 和 params ;query是明文,params是隐藏的; 今天在使用params的时候发现获取不到参数了 我的写法: 1、 路由配置: 2、跳转: 3、接收: 4、结果: 得到一个警告和空对象 查看链接4.1.4更新日志发现官方做了删除替代,那这样的话

    2024年02月10日
    浏览(75)
  • vue3中使用router路由实现跳转传参

    大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同。 我们今天主要讲router.push(location, onComplete?, onAbort?) vue3中新增API:useRouter和useRoute 1.首先在需要跳转的页面引入API—useRouter 2.在跳转页面定义router变量

    2023年04月09日
    浏览(37)
  • mac解决“您的电脑因为出现问题问题而重新启动 SOCD report detected: (iBoot panic)“报错, 重置SMC与重置NVRAM(PRAM)

    mac monterey 12.5.1 关机后再开机出现报错 关机重启更新系统都不管用 按一下音量加,再按一下音量减再长按5秒关机键, 开机后没再出现自动重启和报错, 鬼知道这是个什么神仙bug, 估计可能是软件和系统不兼容卡死, 按我理解mac可能只需要长按关机键, 手机的话可能是三步一起操作

    2024年02月08日
    浏览(185)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(58)
  • Tomcat隐藏版本号和报错信息

    漏洞描述 默认错误页、默认索引页、示例JSP和/或示例servlet安装在远程ApacheTomcat服务器上。应该删除这些文件,因为它们可以帮助攻击者发现有关远程Tomcat安装或主机本身的信息。 在日常工作中,经常需要处理这样的漏洞修复,很多同学第一反应就是删除默认引导页,但是再

    2024年02月08日
    浏览(37)
  • SQL注入进阶:掌握联合查询注入和报错注入攻击技巧

    数据来源         本文仅用于信息安全的学习,请遵守相关法律法规,严禁用于非法途径。若观众因此作出任何危害网络安全的行为,后果自负,与本人无关。 介绍         联合查询注入是SQL注入的一种,通过在原有的SQL语句中添加UNION(联合)操作,将恶意构造的

    2024年02月06日
    浏览(52)
  • 列表进入详情页传参问题(vue的问题)

    例如商品列表页面前往商品详情页面,需要传一个商品id; c页面的路径为 http://localhost:8080/#/detail?id=1 ,可以看到传了一个参数 id=1 ,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是 this.$route.query.id vue传参方式有:query、params+动

    2024年01月21日
    浏览(34)
  • 列表进入详情页的传参问题(vue的问题)

    c页面的路径为 http://localhost:8080/#/detail?id=1 ,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是 this.$route.query.id vue传参方式有:query、params+动态路由传参。 说下两者的区别: 1.query通过path切换路由,

    2024年01月19日
    浏览(34)
  • router.addRoute()报错 Uncaught Error: [vue-router] “path” is required in a route configuration

    后端动态传递路由,前端通过router.addRoute()添加时报错。Uncaught Error: [vue-router] “path” is required in a route configuration(未捕获错误:[vue-router]:\\\"路径\\\"在路由配置中是必需的) 查看官方的接口文档:Vue Router _addRoute接口,等于说 addRoute() 实际接收的是一个类型为 RouteRecordRaw

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包