如何有效解决routeparams报错问题？-HCRM博客

在Vue Router4中，使用params进行组件间传参时，可能会遇到报错或参数失效的问题，以下是对这一问题的详细分析与解决方案：

问题描述

（图片来源网络，侵权删除）

在Vue Router4中，通过params传递数据时，如果按照常规方式编写代码，可能会在新页面无法获取到传递的参数，导致出现错误或警告。

以下代码尝试使用params传递数据：

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

接收页面尝试渲染传递的数据：

<template>
  <div>姓名：{{ route.params?.name }}</div>
  <div>电话：{{ route.params?.phone }}</div>
  <div>年龄：{{ route.params?.age }}</div>
</template>
<script setup>
import { useRoute } from 'vuerouter'
const route = useRoute()
</script>

跳转页面后，发现params数据为空，控制台出现Vue Router的警告。

原因分析

从Vue Router的2022年8月22日更新开始，新页面无法获取到通过上述方式传递的params，这是因为Vue Router4在处理params时进行了一些调整，导致原有的传参方式在新页面中失效。

（图片来源网络，侵权删除）

解决方案

针对上述问题，有以下几种解决方案：

1、使用query的方式传参：将参数放在路由的查询字符串中，而不是params中，这种方式可以确保参数在URL中可见，并且在新页面中可以正常获取，示例代码如下：

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

2、将参数放在pinia或vuex仓库里：利用状态管理工具来存储和传递参数，这样可以确保参数在组件之间共享，示例代码如下：

   // pinia store.js
   export const useStore = defineStore({
     id: '',
     name: '',
     phone: '',
     age: '',
   })
   // 组件中使用
   import { useStore } from '@/stores/store'
   const store = useStore()
   const toDetail = () => {
     store.$patch({ id: '1', name: 'ly', phone: 13246566476, age: 23 })
     router.push({ name: 'detail' })
   }

3、使用动态路由匹配：修改路由路径定义部分，将参数作为路径的一部分，这样可以避免params参数在新页面中失效的问题，示例代码如下：

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

4、使用History API方式传递和接收：在跳转前的页面使用state参数，并在新页面使用history.state接收参数，示例代码如下：

（图片来源网络，侵权删除）

   // 跳转前页面
   import { useRouter } from 'vuerouter'
   const router = useRouter()
   const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
   const toDetail = () => router.push({ name: 'detail', state: { params } })
   // 跳转后页面
   import { useRoute } from 'vuerouter'
   const route = useRoute()
   const historyParams = route.state && route.state.params
   console.log('history.state', history.state)

Vue Router4中params传参失效和报错问题可以通过多种方式解决，包括使用query、pinia或vuex、动态路由匹配以及History API，根据具体需求选择合适的解决方案，以确保参数能够正确传递和接收。