Vue3如何在不将参数添加到URL的情况下向路由传递参数？

在Vue3 + Vue Router 4中，之前Vue2里通过未定义在path中的params传递参数的方式已失效——Router 4会自动丢弃未在路由path中声明的params。以下是几种可行的解决方案：

方案1：使用history.state传递临时数据 #

这是Vue Router官方推荐的方式，数据会存在浏览器的history栈中，不会出现在URL里，但页面刷新后数据会丢失，适合临时传递非持久化数据。

跳转时传递数据 #

<router-link :to="{ name: 'someRoute', state: { message: 'Some Message' } }">
  Some link
</router-link>

<!-- 编程式导航写法 -->
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const navigateToRoute = () => {
  router.push({
    name: 'someRoute',
    state: { message: 'Some Message' }
  })
}
</script>

目标组件接收数据 #

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

// 从state中读取数据，可选链避免刷新后报错
console.log(route.state?.message) // 'Some Message'
</script>

方案2：使用全局状态管理（Pinia/Vuex） #

如果需要传递的数据需要持久化（页面刷新不丢失），可以用全局状态管理工具存储数据，跳转后从状态中读取。以Pinia为例：

定义状态仓库 #

// stores/messageStore.js
import { defineStore } from 'pinia'

export const useMessageStore = defineStore('message', {
  state: () => ({
    content: ''
  }),
  actions: {
    setMessage(msg) {
      this.content = msg
    }
  }
})

跳转前存入状态 #

<template>
  <button @click="goToTargetRoute">跳转</button>
</template>

<script setup>
import { useMessageStore } from '@/stores/messageStore'
import { useRouter } from 'vue-router'

const messageStore = useMessageStore()
const router = useRouter()

const goToTargetRoute = () => {
  // 先把数据存入全局状态
  messageStore.setMessage('Some Message')
  // 再跳转路由
  router.push({ name: 'someRoute' })
}
</script>

目标组件读取数据 #

<script setup>
import { useMessageStore } from '@/stores/messageStore'

const messageStore = useMessageStore()
// 从全局状态中获取数据
console.log(messageStore.content) // 'Some Message'
</script>

方案3：路由元信息（meta）配合导航守卫（可选） #

这种方式适合需要在路由层面统一处理参数的场景，通过导航守卫临时传递数据：

跳转时携带参数 #

router.push({
  name: 'someRoute',
  meta: { message: 'Some Message' }
})

全局导航守卫中转数据 #

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.message) {
    // 将meta中的数据挂载到路由props上
    to.props = { message: to.meta.message }
  }
  next()
})

路由配置开启props #

{
  path: '/someRoute',
  name: 'someRoute',
  component: () => import('@/app/pages/SomeRoute.vue'),
  props: true
}

目标组件接收props #

<script setup>
const props = defineProps({
  message: String
})

console.log(props.message) // 'Some Message'
</script>

内容的提问来源于stack exchange，提问作者Arno van Oordt