Vue Router4中params传参失效和报错问题的解决方法

更新时间：2024年03月01日 11:05:21 作者：十一*

在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下

问题描述

在使用vue-router4中params 进行路由组件之间传参，跳转页面接收不了并出现如下错误

![在这里插入图片描述](https://img-blog.csdnimg.cn/8d64306439ac47b49edf4c0315d213f2.png

如下是我的代码

传输页面

  router.push({
    name: "postBlog",
    params: {
      dialogVisible: true,
      data: data,
    },
  });

接收页面

import { useRouter } from "vue-router";
const route = useRouter();

const dialogVisible = ref(false)
console.log(route.params)

原因分析：

点开链接后发现了原因, 点击查看更新日志

在这里插入图片描述

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

解决方案：

vue也给我们提出了代替方案：

使用 query 的方式传参
将参数放在 pinia 或 vuex仓库里
使用动态路由匹配
传递 state，在新页面使用 History API 接收参数
使用 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')
}

查看页面效果，控制台警告也消失了：

在这里插入图片描述

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

在这里插入图片描述

使用HistoryAPI方式传递和接收

在跳转前的页面使用 state 参数：

<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>

跳转的后页面接收：

<template>
  <div>{{ historyParams }}</div>
</template>

<script setup lang="ts">

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

在这里插入图片描述

以上就是Vue Router4中params传参失效和报错问题的解决方法的详细内容，更多关于Vue params传参失效和报错的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

VUE2.0中Jsonp的使用方法
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下
2018-05-05
vue-devtools的安装和使用步骤详解
在本篇文章中小编给大家整理的是一篇关于vue-devtools安装使用的相关知识点内容，有需要的朋友们可以学习下。
2019-10-10
浅谈vue实现双向事件绑定v-model的原理
vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素，本文就详细的介绍一下原理，感兴趣的可以了解一下
2021-08-08
ElementUI表格中添加表头图标悬浮提示
本文主要介绍了ElementUI表格中添加表头图标悬浮提示，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
浅析Vue.js中$emit和$on的用法和区别
在 Vue.js 中，$emit和$on方法是两个常用的方法，用于实现组件间的通信，虽然它们的名字很相似，但它们的作用和用法有所不同，本文将介绍$emit和$on方法的区别，并通过代码示例来说明它们的用法,感兴趣的朋友可以参考下
2023-07-07
深入了解vue2与vue3的生命周期对比
这篇文章主要为大家介绍了vue2与vue3的生命周期对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
vue3实现监听store中state状态变化的简单方法
这篇文章主要给大家介绍了关于vue3实现监听store中state状态变化的简单方法,store是一个状态管理工具,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue项目依赖包安装及配置过程
这篇文章主要介绍了Vue项目依赖包安装及配置过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
vue中根据时间戳判断对应的时间(今天昨天前天)
这篇文章主要介绍了vue中根据时间戳判断对应的时间（今天昨天前天）,需要的朋友可以参考下
2019-12-12