Vue-router4 - 通過 object 與<router-link :to>不會傳遞動態數據</router-link>

Question

我瀏覽了這個有點相關的vue-router@4.05 object 參數。 在那個線程中提到了這個https://github.com/vuejs/vue-router-next/issues/494 ，但我仍然很困惑。

我還嘗試使用路由器鏈接組件的:to屬性傳遞一些數據。 我做了兩支筆來展示這個問題：

筆 1成功通過了在路由定義中定義的 object。

筆 2正在嘗試傳遞動態 object 而不是實際的 object，它得到一個帶有 [Object object] 的字符串，如 github 問題中所述。

控制台 output：

[Vue 警告]：無效的道具：道具“存儲庫”的類型檢查失敗。 預期 Object，得到具有 > 值“[object Object]”的字符串。 at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at at

所以，如果我直截了當，最終你不能傳遞動態 object 因為它已被解析，但你可以傳遞 static object？

我已經嘗試過 props: true 和一切，我正在嘗試function 模式解決方案作為更復雜的示例

片段：

    <router-link :to="{ name: 'Home' }">Home</router-link>
    <router-view />

---

    <router-link
      :to="{
        name: 'Repository',
        params: { repository: { one: '1', two: '2' } },
      }">click me</router-link>

v1

    const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/repo/",
      name: "Repository",
      component: () => import("../components/Repository.vue"),
      props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params, repository: { one: "1", two: "2" } };
      }
    }];

v2

    const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/repo/",
      name: "Repository",
      component: () => import("../components/Repository.vue"),
      props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params };
      }
    }];

Answer 1

Vue-router 從未支持傳遞任意數據（未在路由定義中定義為params ），並且從未按預期工作。 檢查我對您鏈接的問題的回答

您的示例v1僅起作用，因為在路由的props function 中定義的存儲repository值覆蓋了通過params從router-link傳遞的repository值（即repository: "[object Object]" ，您可以在控制台中看到）

所以，如果我直截了當，最終你不能傳遞動態 object 因為它已被解析，但你可以傳遞 static object？

不。

1. 您無法使用$router.push或router-link傳遞任何 object （即使它在 Vue-router 3 中“有點工作” - 再次，請參閱我的鏈接答案）

2. 您可以將路由定義上的props定義為 object 或 function 返回 object ，它的屬性將通過傳遞給組件的道具而無需任何編碼或任何東西。 但這與使用$router.push或router-link非常不同，因為數據不是來自源路由而是來自路由器本身......

Answer 2

您的代碼中發生了什么：

正如您在控制台中的警告消息中看到的那樣，您實際上是從道具中獲取String而不是Object ：

[Vue 警告]：無效的道具：道具“存儲庫”的類型檢查失敗。 預期 Object，得到字符串

許多人建議使用Vuex並設置全局狀態作為解決方案，我相信這不是您想要的。

解決方案

為避免將[Object, Object]作為傳遞的數據，您可以做的是在原始頁面中對 object 進行字符串化，然后在目標頁面上再次將傳遞的字符串解析為 object。

原始頁面/路由器組件

 <router-link
      :to="{
        name: 'Your_Route_Name',
        params: { repository: JSON.stringify({ one: '1', two: '2' }) },
      }">click me</router-link>

在您的目標路由器組件中

<template>
    <div>
        {{ JSON.parse(repository) }}
    </div>
</template>

<script>
export default {
    props: ["repository"],
    setup(props) {
        //Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
        console.log(JSON.parse(props.customer));
    }
}
</script>

這樣，您將能夠按意圖傳遞 Object。 如果這是您正在尋找的，請將 select 我作為最佳答案。 謝謝！