Vue3+Vue Router4如何通过路由传递自定义Doc类对象避免转为[object Object]

路由路径中定义的动态参数（也就是path字段里写的:xxx）会被强制序列化为字符串拼接进URL，JS对象直接调用toString()的默认返回就是[object Object]，所以你直接传自定义类实例会无法解析。而父子组件prop传值是内存中直接传递JS变量，不存在序列化问题，所以可以正常识别。

方案1：传递唯一标识（最稳定，刷新不丢失） #

这是生产环境最推荐的做法，URL干净且无数据丢失风险：

步骤1：修改router.js配置 #

// 先把你测试用的三个数组抽离到公共文件比如../controllers/data.js统一导出，这里直接示例引入
import { inProgress, pending, completed } from '../controllers/data'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/metaupdate/:docID', // 仅传唯一标识docID
    name: 'MetaUpdate',
    component: MetaUpdate,
    // 开启路由props自动转换，直接生成组件需要的Doc实例
    props: route => {
      const docID = Number(route.params.docID)
      const allDocs = [...inProgress, ...pending, ...completed]
      const targetDoc = allDocs.find(item => item.docID === docID)
      return { doc: targetDoc }
    }
  }
]

步骤2：修改Document.vue跳转逻辑 #

只传docID即可：

<router-link 
  :to="{  name: 'MetaUpdate',
          params: {docID: doc.docID} }" v-if="isUpdateOrDelete" class="doc-item update">Update
</router-link>

修改后MetaUpdate组件无需任何改动，props可以直接拿到符合类型校验的Doc实例。

方案2：序列化传递完整对象（适合小对象临时传值） #

如果不想做数据查询，可以把对象序列化后通过query参数传递：

步骤1：修改router.js配置 #

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/metaupdate', // 不需要定义动态参数
    name: 'MetaUpdate',
    component: MetaUpdate,
    props: route => {
      // 反序列化后重新生成Doc类实例
      const raw = JSON.parse(route.query.doc)
      return { doc: new Doc(raw.docID, raw.title, raw.status) }
    }
  }
]

步骤2：修改Document.vue跳转逻辑 #

<router-link 
  :to="{  name: 'MetaUpdate',
          query: {doc: JSON.stringify(doc)} }" v-if="isUpdateOrDelete" class="doc-item update">Update
</router-link>

注意：该方案如果对象过大会导致URL超长，部分浏览器对URL长度有限制，且URL中会暴露完整数据，仅适合临时小数据传输。

方案3：全局状态管理（适合大型项目） #

如果项目中大量跨页面共享数据，可以引入Pinia状态管理库，点击Update时把选中的Doc实例存入Pinia，跳转MetaUpdate后直接从Pinia读取即可，不存在序列化问题。

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