[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

这篇具有很好参考价值的文章主要介绍了[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

 警告信息建议访问的链接

场景:

当我 在vue3 组合式api中尝试使用name+params去路由跳转并传递参数的时候,出现警告信息,并且接收不到params的参数。代码如下:

a页面跳转b页面

//a页面

<script setup>
import { useRouter } from 'vue-router'
    
const router = useRouter()
const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({ name: 'detail', params })

</script>

<template>
  <el-button type="danger" @click="toDetail">查看情页</el-button>
</template>
//b页面

<template>
  <div>姓名:{{ route.params?.name }}</div>
  <div>电话:{{ route.params?.phone }}</div>
  <div>年龄:{{ route.params?.age }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

点击链接查看到更新日志

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

也就是说,从Vue Router的2022-8-22 这次更新后,我们使用上面的方式在新页面无法获取:

vue也给我们提出了解决方案:

  1. 使用 query 的方式传参

    只要改成query 传参就好了,query传参的话,既可以写 path ,也可以是 name ,并且所有参数都会显示在URL 地址上。

<script setup>
import { useRouter } from 'vue-router'
    
const router = useRouter()
const query = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({  path: '/detail', query })

</script>
<template>
  <el-button type="danger" @click="toDetail">查看情页</el-button>
</template>

2.将参数放在 pinia 或 vuex仓库里

3.使用动态路由匹配

4.[传递 state,在新页面使用 History API 接收参数](#使用 History API 方式传递和接收)

5.使用 meta 原信息方式传递 (此方式更适用于路由守卫)

使用动态路由匹配

如果传递参数较少的情况下,可以尝试使用下面这种方式,只要修改一下path定义部分就可以了:

// params 传递的参数: { id: '1', name: 'ly', phone: 13246566476, age: 23 }

{
      path: '/detail/:id/:name/:phone/:age',
      name: 'detail',
      component: () => import('@/views/detail/index.vue')
}

查看页面效果,控制台警告也消失了:

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

 注意,如果使用使用了这种动态路由匹配方式, path: '/detail/:id/:name/:phone/:age' ,中这三个参数你都必须传递,否则会报错:

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

使用 History API 方式传递和接收

在跳转前的页面使用 state 参数:a跳转b

//a页面
<script setup>
import { useRouter } from 'vue-router'
    
const router = useRouter()

const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({ name: 'detail', state: { params } })

</script>

<template>
  <el-button type="danger" @click="toDetail">查看情页</el-button>
</template>
//b页面
<template>
  <div>{{ historyParams }}</div>
</template>

<script setup lang="ts">

const historyParams = history.state.params
console.log('history.state', history.state)
</script>

[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details

 内容来源于作者: 

lioayi

文章地址: https://www.cnblogs.com/liao-yi/articles/17028269.html文章来源地址https://www.toymoban.com/news/detail-465186.html

到了这里,关于[Vue Router warn]: Discarded invalid param(s) “id“ when navigating. Seexxxxxxxfor more details的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包