Vue Router 重大更新后，params 传参失效？三种替代方案深度解析

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

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

一、query 传参：简单直观的 URL 传参方式

1.1 实现方式

query 传参是通过在 URL 中添加查询字符串的方式传递参数，使用{ path: '', query: {} }的形式。这种方式传递的参数会显示在 URL 中，当页面重新加载时，参数依然会保留。

1.2 代码示例

跳转组件

  <el-button @click="goToDetail">跳转到详情页</el-button>

import { useRouter } from 'vue-router'

const router = useRouter()

const goToDetail = () => {

   router.push({

     path: '/detail',

     query: {

       id: '123',

       name: '示例数据'

     }

   })

}

接收参数组件

   <div>

     <h3>详情页</h3>

     <p>ID: {{ $route.query.id }}</p>

     <p>名称: {{ $route.query.name }}</p>

   </div>

import { useRoute } from 'vue-router'

const route = useRoute()

// 在脚本中获取参数

console.log('接收的ID:', route.query.id)

console.log('接收的名称:', route.query.name)

1.3 优缺点及适用场景

•优点：实现简单直观，参数在 URL 中可见，页面刷新后参数不会丢失，便于调试和分享页面。

•缺点：由于参数暴露在 URL 中，不适合传递敏感信息；且 URL 的长度有限制，不适合传递大量数据。

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

二、state 传参：params 传参的理想替代者

2.1 实现方式

state 传参是借助 HTML5 History API 中的 state 对象来传递参数，使用{ name: '', state: {} }的形式。这种方式传递的参数不会显示在 URL 中，相对较为隐蔽。

2.2 代码示例

跳转组件

   <el-button @click="goToEditor">跳转到编辑页</el-button>

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

     }

   })

}

接收参数组件

   <div>

     <h3>编辑页</h3>

     <p>描述: {{ editInfo.description }}</p>

     <p>编码: {{ editInfo.code }}</p>

     <p>值: {{ editInfo.value }}</p>

   </div>

import { reactive } from 'vue'

// 从 history 中获取 state 数据

const editInfo = reactive(history.state || {})

// 处理页面刷新可能导致的参数丢失问题

if (!editInfo.code) {

   console.warn('参数可能因页面刷新而丢失')

   // 可以在这里添加相应的处理逻辑，如跳回上一页

}

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

     }

   }

})

跳转组件

   <el-button @click="goToDetailPage">跳转到详情页</el-button>

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

}

接收参数组件

   <div>

     <h3>详情页</h3>

     <p>ID: {{ dataStore.sharedData?.id }}</p>

     <p>名称: {{ dataStore.sharedData?.name }}</p>

     <p>内容: {{ dataStore.sharedData?.content }}</p>

   </div>

import { onUnmounted } from 'vue'

import { useDataStore } from './store'

const dataStore = useDataStore()

// 组件卸载时清理数据，避免影响其他页面

onUnmounted(() => {

   dataStore.clearSharedData()

})

3.3 优缺点及适用场景

•优点：可以实现复杂数据的跨页面、跨组件共享，数据存储在状态管理中，不受页面刷新的影响，数据持久化能力强。

•缺点：需要额外配置状态管理库，增加了一定的代码量和学习成本。

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

四、总结与最佳实践建议

在 Vue Router 版本更新后，{ name: '', params: {} }传参方式的失效，促使我们采用更合理、更可靠的传参方式。query 传参、state 传参和 Pinia（或 Vuex）传参各有其特点和适用场景。

在实际开发中，我们可以遵循以下最佳实践：

• 对于简单、公开且需要在 URL 中体现的数据，优先使用 query 传参，利用其可分享性和可追溯性的优势。

• 当需要传递中等规模且不希望暴露在 URL 中的数据时，可以使用 state 传参，但要注意处理页面刷新可能导致的参数丢失问题。

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

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