Vue3中使用vue-router向组件传递非URL来源的Props

下面是几种在Vue3中结合vue-router传递非URL来源props的可行方案，覆盖不同场景需求：

1. 利用路由元信息（meta）传递静态/全局参数 #

如果你的非URL参数是静态或者全局通用的，可以直接在路由配置的meta字段中定义，组件内通过useRoute获取：

路由配置示例： #

const routes = [
  {
    path: '/demo',
    name: 'DemoPage',
    component: () => import('../views/DemoPage.vue'),
    // 自定义非URL参数
    meta: {
      pageTitle: '自定义页面标题',
      requireAuth: false,
      extraInfo: {
        author: 'Devck',
        version: '1.0.0'
      }
    }
  }
]

组件内获取： #

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// 直接访问meta中的非URL参数
const pageTitle = route.meta.pageTitle
const extraInfo = route.meta.extraInfo
</script>

2. 编程式导航时动态传递props #

如果需要在跳转时动态传递非URL参数，可以在router.push中通过props字段传递，同时开启路由的props配置：

路由配置（开启props接收）： #

const routes = [
  {
    path: '/demo',
    name: 'DemoPage',
    component: () => import('../views/DemoPage.vue'),
    props: true // 开启props接收，支持传递非URL参数
  }
]

编程式导航传递参数： #

// 跳转时动态传递非URL参数
router.push({
  name: 'DemoPage', // 必须用name跳转，path模式不支持传递非URL props
  props: {
    nonUrlProp: '这是一个不显示在URL中的参数',
    userInfo: { id: 123, name: '测试用户' }
  }
})

组件内接收props： #

<script setup>
// 定义接收的props
const props = defineProps({
  nonUrlProp: String,
  userInfo: Object
})

// 使用参数
console.log(props.nonUrlProp)
console.log(props.userInfo)
</script>

如果需要结合URL参数和非URL参数，可以用props函数模式自定义处理：

const routes = [
  {
    path: '/demo/:id',
    name: 'DemoPage',
    component: () => import('../views/DemoPage.vue'),
    props: (route) => ({
      urlId: route.params.id, // URL参数
      fixedNonUrlProp: '固定非URL参数' // 自定义非URL参数
    })
  }
]

3. 状态管理库（Pinia/Vuex）传递复杂参数 #

如果参数需要在多个组件间共享，或者参数结构复杂，推荐使用状态管理库：

以Pinia为例： #

定义状态仓库：

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

export const useAppStore = defineStore('app', {
  state: () => ({
    tempData: null // 存储临时非URL参数
  }),
  actions: {
    setTempData(data) {
      this.tempData = data
    }
  }
})

跳转前设置参数：

import { useAppStore } from '@/stores/app'
import { useRouter } from 'vue-router'

const store = useAppStore()
const router = useRouter()

// 设置非URL参数
store.setTempData({
  key: 'value',
  list: [1, 2, 3]
})
// 跳转页面
router.push('/demo')

组件内获取参数：

<script setup>
import { useAppStore } from '@/stores/app'

const store = useAppStore()
// 获取传递的非URL参数
const tempData = store.tempData
</script>

内容的提问来源于stack exchange，提问作者Devck - DC