通過 Vue Router 傳遞自定義 JS 對象

Question

幫助！ 幾個小時以來，我一直在用頭撞牆……

正在使用的技術：

• Vue (v3.0.0)
• Vue 路由器 (v4.0.0-0)
• 引導程序 (v5.1.1)

目標
我有兩個頁面（Home.vue、MetaUpdate.vue）和一個組件（Document.vue）。 Home 包含幾個 Document 組件。 單擊 Document 組件之一中的“更新”div/按鈕后，我們應該路由到 MetaUpdate 頁面。 MetaUpdate 頁面需要保存下面定義的整個 Doc JS 對象，從 Document 組件通過路由器傳遞下來。

問題：
出於某種原因，當我通過路由器將我的自定義對象作為道具傳遞時，它就像不知道如何解釋該對象並將其作為字符串“[object Object]”傳遞。 但是，如果我將自定義對象作為 prop 從父組件傳遞給子組件，它會正確解釋它。 那么，我實際上如何通過路由器發送道具？ 需要注意的是，我最初是通過路由器成功傳遞了兩個字符串，所以我不明白為什么當我將其更改為傳遞自定義對象時，一切都失敗了。

JavaScript 對象

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

路由器.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

主頁.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>

文檔.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>

元更新.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 來執行此操作）。
• 父組件可以向下傳遞給<router-view> doc 數組，然后路由組件可以通過該數組中的 ID 查找文檔。