Vue3中路由传值使用params传值失败报错

首先声明下我只是菜鸟，记录一下问题，能帮到你最好，互相学习。

在我们使用Vue3中用到params传值时，发现传值失败，并给出一个报错Discarded invalid param(s) "XXX" when navigating.

大家可以使用其他方法达到传值目的：

1、使用query进行传值，

传值

(1)标签

<router-link :to="{name: 'page', query: {a:'0'}}" ></router-link>

(2)方法

router.push({ name: 'page', query: {a:'0'}})

在接收页面
 

<script setup>

import { useRoute } from 'vue-router'

const route = useRoute()

console.log('route.query', route.query)
</script>

2、使用 History API 方式传递和接收（我认为很方便的一个方法）

传值

(1)标签

<router-link :to="{name: 'page', state: {a:'0'}}" ></router-link>

(2)方法

router.push({ name: 'page', state: {a:'0'}})

在接收页面只需执行
 

<script setup>
console.log('history.state', history.state)
</script>

就可以拿到值，并且刷新时数据不会丢失