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

最新推荐文章于 2024-06-25 15:42:39 发布

原创最新推荐文章于 2024-06-25 15:42:39 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在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>

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