在 Vue 开发中，路由传参是日常开发的基础操作。然而，自 2022 年 8 月 22 日 Vue Router 的版本更新后，曾经被广泛使用的 { name: '', params: {} } 传参方式出现了问题 —— 在新页面中无法获取到传递的参数。这一变化让不少开发者感到困惑，为何长期使用的方式突然失效？官方给出的解释是，这种行为在某些情况下虽能生效，但多年来一直被建议反对，因为它属于路由中的反模式。其主要原因在于，使用 params 传参时，一旦页面重新加载，参数就会丢失，从而破坏应用程序的正常运行。

幸运的是，官方提供了多种替代方案。本文将对这些方案进行深度解析，帮助开发者在不同场景下做出合适的选择。

一、query 传参：简单直观的 URL 传参方式
1.1 实现方式
query 传参是通过在 URL 中添加查询字符串的方式传递参数，使用 { path: '', query: {} } 的形式。这种方式传递的参数会显示在 URL 中，当页面重新加载时，参数依然会保留。
1.2 代码示例
跳转组件

<template>
    <el-button @click="goToDetail">跳转到详情页</el-button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToDetail = () => {
     router.push({
       path: '/detail',
       query: {
         id: '123',
         name: '示例数据'
       }
     })
}
</script>

接收参数组件

<template>
     <div>
       <h3>详情页</h3>
       <p>ID: {{ $route.query.id }}</p>
       <p>名称: {{ $route.query.name }}</p>
     </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 在脚本中获取参数
console.log('接收的ID:', route.query.id)
console.log('接收的名称:', route.query.name)
</script>

1.3 优缺点及适用场景
• 优点：实现简单直观，参数在 URL 中可见，页面刷新后参数不会丢失，便于调试和分享页面。
• 缺点：由于参数暴露在 URL 中，不适合传递敏感信息；且 URL 的长度有限制，不适合传递大量数据。

• 适用场景：适用于传递简单的、非敏感的数据，如页面的 ID、页码、筛选条件等。

二、state 传参：params 传参的理想替代者
2.1 实现方式
state 传参是借助 HTML5 History API 中的 state 对象来传递参数，使用 { name: '', state: {} } 的形式。这种方式传递的参数不会显示在 URL 中，相对较为隐蔽。

2.2 代码示例
跳转组件

<template>
     <el-button @click="goToEditor">跳转到编辑页</el-button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToEditor = () => {
     const row = {
       description: '这是一段描述',
       code: 'CODE123',
       value: '示例值'

     }
     router.push({
       name: 'EditorButton',
       state: {
         description: row.description,
         code: row.code,
         value: row.value
       }
     })
}
</script>

接收参数组件

<template>
     <div>
       <h3>编辑页</h3>
       <p>描述: {{ editInfo.description }}</p>
       <p>编码: {{ editInfo.code }}</p>
       <p>值: {{ editInfo.value }}</p>
     </div>
</template>
<script setup>
import { reactive } from 'vue'
// 从 history 中获取 state 数据
const editInfo = reactive(history.state || {})
// 堆代码 duidaima.com
// 处理页面刷新可能导致的参数丢失问题
if (!editInfo.code) {
     console.warn('参数可能因页面刷新而丢失')
     // 可以在这里添加相应的处理逻辑，如跳回上一页

}
</script>

2.3 优缺点及适用场景
• 优点：参数不会显示在 URL 中，隐私性较好；相比 query 传参，能传递的数据量更大。
• 缺点：页面刷新后，state 中的参数可能会丢失，这依赖于浏览器的实现。

• 适用场景：适用于传递中等规模的数据，且不希望参数暴露在 URL 中的场景，如编辑页面所需的表单数据等。

三、Pinia（或 Vuex）传参：跨组件数据共享的利器
3.1 实现方式
Pinia（或 Vuex）是状态管理库，通过在状态管理中存储数据，实现跨页面、跨组件的数据共享。在路由跳转前，将需要传递的参数存储到 Pinia（或 Vuex）的状态中，在目标页面中从状态中获取参数。

3.2 代码示例

Pinia store 文件（store.js）

import { defineStore } from 'pinia'
export const useDataStore = defineStore('data', {
     state: () => ({
       sharedData: null
     }),
     actions: {
       setSharedData(data) {
         this.sharedData = data

       },
       clearSharedData() {
         this.sharedData = null
       }
     }
})

跳转组件

<template>
     <el-button @click="goToDetailPage">跳转到详情页</el-button>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useDataStore } from './store'
const router = useRouter()
const dataStore = useDataStore()
const goToDetailPage = () => {
     const data = {
       id: '456',
       name: '通过Pinia传递的数据',
       content: '这是一段较长的内容...'

     }
     dataStore.setSharedData(data)
     router.push('/detailPage')

}
</script>

接收参数组件

<template>
     <div>
       <h3>详情页</h3>
       <p>ID: {{ dataStore.sharedData?.id }}</p>
       <p>名称: {{ dataStore.sharedData?.name }}</p>
       <p>内容: {{ dataStore.sharedData?.content }}</p>
     </div>
</template>
<script setup>
import { onUnmounted } from 'vue'
import { useDataStore } from './store'
const dataStore = useDataStore()
// 组件卸载时清理数据，避免影响其他页面
onUnmounted(() => {
     dataStore.clearSharedData()
})
</script>

3.3 优缺点及适用场景
• 优点：可以实现复杂数据的跨页面、跨组件共享，数据存储在状态管理中，不受页面刷新的影响，数据持久化能力强。
• 缺点：需要额外配置状态管理库，增加了一定的代码量和学习成本。

• 适用场景：适用于传递复杂数据，或者需要在多个组件、多个页面中共享的数据，如用户信息、购物车数据等。

四、总结与最佳实践建议
在 Vue Router 版本更新后，{ name: '', params: {} } 传参方式的失效，促使我们采用更合理、更可靠的传参方式。query 传参、state 传参和 Pinia（或 Vuex）传参各有其特点和适用场景。
在实际开发中，我们可以遵循以下最佳实践：
• 对于简单、公开且需要在 URL 中体现的数据，优先使用 query 传参，利用其可分享性和可追溯性的优势。
• 当需要传递中等规模且不希望暴露在 URL 中的数据时，可以使用 state 传参，但要注意处理页面刷新可能导致的参数丢失问题。

• 面对复杂数据或需要跨组件、跨页面共享的数据，选择 Pinia（或 Vuex）传参，借助状态管理库实现可靠的数据共享。

同时，在项目开发中，应保持传参方式的一致性，避免混合使用多种传参方式，以降低代码的维护成本。通过合理选择传参方式，可以确保应用程序的稳定运行和良好的用户体验。