vue3中params跳转到的页面拿不到params的值?

Question

data是参数，我传参数过去，直接放params里，然后在另一个页面拿数据

const toDetailx = (data: Item) => {
  router.push({
    name: 'Reg',
    params: data,
  })
}

另一个页面

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log(route.params)

但是拿不到数据，并有一个错误提示：

vue-router.mjs:35 [Vue Router warn]: Discarded invalid param(s) "name", "price", "id" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.

Answer 1

在 v4.1.4 里面移除了未定义的params传递，
https://github.com/vuejs/rout...，

可以使用文档里面其它几种建议的数据管理方式替代params传参数。

如果传递参数较少，可以参考commit里面的测试用例代码，修改一下path定义部分, 比如只传递b字段，

 { path: '/:b', name: 'a', components },

assertRecordMatch(
        { path: '/:b', name: 'a', components },
        { name: 'a', params: { a: 'a', b: 'b' } },
        { name: 'a', path: '/b', params: { b: 'b' } }
      )

Answer 2

路由定义上有无问题，是不是下图这种情况，重新加载页面了，参数丢失了。

Answer 3

报错信息里面提到了详情链接，你可以点开看看的。

大概就是说，这种用法如果没有在路由表上面声明动态参数，将会造成刷新后参数丢失。
在 v4.1.4 版本的更新中，增加了删除未使用的参数这个功能。所以会提示你 Discarded invalid param(s) "name", "price", "id"（丢弃无效的参数 "name", "price", "id"）。

如果想要解决，可以在路由表中声明你用到的这些参数，或者使用 query 的形式来传递参数。也可以用 vuex 之类的状态管理来暂存。