Vue路由传递JSON类型prop的实现及vue-router4兼容方案咨询

问题1：是否可以在调用$router.push执行路由跳转时，直接给路由配置中定义的对象类型props赋值为传入的JSON对象？ #

不可以，原因如下：

• 你当前路由配置中的props为静态对象模式，该模式下props的值是固定写死的，不会随路由跳转传入的参数动态更新。
• vue-router4中静态配置的props不会和$router.push传入的params做自动关联映射，跳转时传入的params.abc无法覆盖路由配置里的静态值，目标组件最终拿到的abc永远是你配置里写的空对象。

问题2：vue-router4下同类需求的实现方案 #

通常有以下3种常用方案，可根据场景选择：

方案1：路由props改为函数模式（适合临时传参，无需刷新保留的场景） #

将路由配置的props改为函数形式，主动把路由参数映射到组件props：

// route.js 修改后
[{
  path: "/path", 
  name: "acomp_name", 
  component: PathComp, 
  // 函数模式props，动态从路由参数中取值
  props: route => ({ abc: route.params.abc })
}]

注意：vue-router4中未在path占位符中声明的params属于临时参数，刷新页面后会自动丢失。如果需要刷新不丢失，不推荐该方案。

方案2：通过query传参（适合小体积对象，允许参数暴露在地址栏的场景） #

query参数会拼接在url后，刷新不会丢失，需要对JSON对象做序列化/反序列化处理：

// 跳转逻辑修改
changeRoute(json_sample){
  this.$router.push({
    name: "acomp_name", 
    query: { abc: JSON.stringify(json_sample) }
  })
}

路由配置可继续用函数模式props自动反序列化：

// route.js
[{
  path: "/path", 
  name: "acomp_name", 
  component: PathComp, 
  props: route => ({ abc: JSON.parse(route.query.abc || '{}') })
}]

方案3：通过全局状态管理传参（适合大体积对象，不想暴露参数的场景） #

用Pinia/Vuex存储临时传递的对象，跳转后读取并清理即可，示例用Pinia：

// stores/routeTemp.js 定义临时存储的store
import { defineStore } from 'pinia'
export const useRouteTempStore = defineStore('routeTemp', {
  state: () => ({ abc: null }),
  actions: {
    setAbc(val) { this.abc = val },
    clearAbc() { this.abc = null }
  }
})

跳转前存储参数：

import { useRouteTempStore } from '@/stores/routeTemp'
// ...
methods: {
  changeRoute(json_sample){
    const tempStore = useRouteTempStore()
    tempStore.setAbc(json_sample)
    this.$router.push({name: "acomp_name"})
  }
}

目标组件读取参数：

// PathComp.vue 选项式API示例
import { useRouteTempStore } from '@/stores/routeTemp'
export default {
  mounted() {
    const tempStore = useRouteTempStore()
    const abc = tempStore.abc
    // 读取后立即清理，避免下次跳转残留旧数据
    tempStore.clearAbc()
  }
}

内容的提问来源于stack exchange，提问作者iamcoder