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

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.
阅读 22.5k
3 个回答

在 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' } }
      )

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏