vue3页面跳转遇到 Discarded invalid param(s) “message“ when navigating

文章讲述了在Vue3项目中遇到的一个问题,即使用vue-router的params进行页面间传参时,新页面无法接收到参数并出现错误。作者发现这可能是由于VueRouter的最新更新导致的,并提供了两种解决方案:1)使用query传参,但参数会显示在URL;2)通过HistoryAPI传递和接收数据。作者提供了使用HistoryAPI的示例代码,展示如何正确地在页面之间传递和接收参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近写了一个vue3的项目,在使用路由跳转的时候发现了一个问题,记录分享一下。

1.我在使用useRouter时,发现使用params传参,会使得跳转的页面接受不到参数,会报错,显示

Discarded invalid param(s) "message" when navigating

这个错误,无效参数。

代码如下:页面a跳转到页面b

     页面a:

<template>
  <div class="home">
    <div class="TiaoZhuan" @click="jump()">跳转</div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const Router=useRouter()

let params={message:'你真是一个好人,我好爱你啊'}
function jump(){
  Router.push({name:'about',params:{params}})
}
</script>

   页面b:

<template>
  <div class="about">
    <h1>{{ useMessage }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route=useRoute()

let useMessage=route.params.message
</script>

2.后来我查找了一下资料,发现从Vue Router的2022-8-22 这次更新后,我们使用上面的方式在新页面无法获取。vue Router也提供了解决方法。 

      (1).query传参

          query传参是可以正常传参数的,但是传的参数会显示在url地址栏上。这里我就不介绍了。

        (2).使用 History API 方式传递和接收

          代码如下:

              页面a:

<template>
  <div class="home">
    <div class="TiaoZhuan" @click="jump()">跳转</div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const Router=useRouter()

let params={message:'你真是一个好人,我好爱你啊'}

function jump(){
  Router.push({name:'about',state:{params}})
}
</script>

               页面b:

<template>
  <div class="about">
    <h1>{{ useMessage }}</h1>
  </div>
</template>

<script setup>
let useMessage=history.state.params.message

console.log(history.state)
</script>

     这样你就可以正常的接受参数了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值