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

最近写了一个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>

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