通过 Vue Router 传递自定义 JS 对象

Question

帮助！为此，我已经把头撞在墙上好几个小时了……

正在使用的技术：

• Vue (v3.0.0)
• Vue-Router (v4.0.0-0)
• 引导程序 (v5.1.1)

目标
我有两个页面（Home.vue、MetaUpdate.vue）和一个组件（Document.vue）。 Home 包含几个 Document 组件。单击 Document 组件之一中的“更新”div/按钮后，我们应该路由到 MetaUpdate 页面。 MetaUpdate 页面需要保存下面定义的整个 Doc JS 对象，通过路由器从 Document 组件向下传递。

问题：
出于某种原因，当我通过路由器将自定义对象作为道具传递时，就好像它不知道如何解释该对象并将其作为字符串“[object Object]”传递。但是，如果我将自定义对象作为道具从父组件传递给子组件，它会正确解释它。那么，我如何真正通过路由器发送道具呢？需要注意的是，我最初是通过路由器传递两个字符串成功，所以我不明白为什么当我将它更改为传递自定义对象时，一切都坏了。

JavaScript 对象

class Doc {
    constructor(docID, title, status) {
        this.docID = docID;
        this.title = title;
        this.status = status;
    }
}

router.js

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from '../views/Home.vue'
import MetaUpdate from '../views/MetaUpdate.vue'

import {Doc} from '../controllers/data'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/metaupdate/:doc',
    name: 'MetaUpdate',
    component: MetaUpdate
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

Home.vue
文件中还有更多内容，但这就是回答此问题所必需的全部内容。

<template>
<div class="col col-12 col-lg-6 in-progress">
    <div class="doc-status">In Progress</div>
        <template v-for="(doc, index) in inProgress" :key="index">
            <Document :doc="doc"></Document>
        </template>
    </div>
</div>
</template>

<script>
import Document from "../components/Document.vue";
import {Doc} from '../controllers/data'
var inProgress = [];
var pending = []
var completed = [];

export default {
    data: function() {
        return {
            inProgress,
            pending,
            completed
        }
    },
    components: {
        Document
    }
}

/***** Temporary Push of Docs *****/
for(let i = 0; i < 5; i++){
    let docA = new Doc(i, 'Progress Document', 'in-progress');
    let docB = new Doc(i, 'Pending Document', 'pending');
    let docC = new Doc(i, 'Completed Document', 'completed');

    inProgress.push(docA);
    pending.push(docB);
    completed.push(docC);
}
/***** Temporary Push of Docs *****/
</script>

Document.vue

<template>
    <div class="doc">
        <div class="doc-title">{{ doc.title }}</div>
        <router-link to="/docviewer" v-if="isInProgress" class="doc-item submit">Submit</router-link>
        <router-link to="/docviewer" class="doc-item preview">Preview</router-link>
        <router-link 
            :to="{  name: 'MetaUpdate',
                    params: {doc: this.doc} }" v-if="isUpdateOrDelete" class="doc-item update">Update
        </router-link>
        <router-link to="/docviewer" v-if="isUpdateOrDelete" class="doc-item delete">Delete</router-link>
    </div>
</template>

<script>
import {Doc} from '../controllers/data'

export default {
    props: {
        doc: {
            type: Doc,
            required: true
        }
    },
    computed: {
        isInProgress() {
            return this.doc.status === 'in-progress';
        },
        isUpdateOrDelete() {
            return this.doc.status === 'in-progress' || this.doc.status === 'pending';
        }
    }
}
</script>

MetaUpdate.vue
文件中还有更多内容，但这就是回答此问题所必需的全部内容。

<template>
    <div class="tabs">{{ $route.params.doc.title }}</div>
</template>

<script>
import { Doc } from '../controllers/data'

export default {
    props: {
        doc: {
            type: Doc,
            required: true
        }
    }
}
</script>

Answer 1

您不能将对象作为路由参数传递。路由参数是字符串，因为这些参数构成 URL 的一部分；如果您传递的参数不是字符串，那么它将被转换为字符串。在将 :doc 参数设置为对象进行导航后，您期望 URL 是什么？

相反，您应该将文档 ID 设置为参数，然后接收该参数的路由组件会以某种方式使用 ID 查找文档对象。你如何做到这一点取决于你，也许：

• 将所有文档存储在一个全局数组中，供所有组件共享（您可以使用 Vuex 来执行此操作）。
• 父组件可以将doc数组向下传递给<router-view>，然后路由组件可以通过该数组中的ID查找文档。