Vue3：如何將參數發送到路由而不將它們添加到 Vue3 中的 url 中？

Question

在 Vue3 中，有沒有一種方法可以將屬性傳遞給路由，而無需在 url 中顯示值？

我這樣定義路線：

{
    path: '/someRoute',
    name: 'someRoute',
    component: () => import('@/app/pages/SomeRoute.vue'),
    props: (route) => {
            ...route.params
        }, // <-- I've seen this method in Vue2 but in Vue3 the route.params is just empty here
}

我這樣稱呼這條路線：

<router-link :to="{ name: 'someRoute', params: { message: 'Some Message' } }">Some link</router-link>

當我將路徑更改為 path: '/someRoute/:message', 時，訊息傳遞得很好，但我只想傳遞訊息而不將其顯示在網址中。

我曾經看過幾個使用此方法的 Vue2 範例（例如 https://stackoverflow.com/a/50507329/1572330），但顯然它們不再在 Vue3 中運作。

還有Vue3 文件中的所有範例(https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs。 org/guide/essentials/passing-props.html）透過url 本身傳遞它們的值，所以我不確定它是否還可能。

對此的任何想法都會有所幫助。

Answer 1

最後我在變更日誌中找到了一些相關內容：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

顯然，如果沒有在 url 中顯示，就不再可能透過參數發送屬性。但幸運的是，他們給了一些替代建議。 最適合我的情況的是使用 state: { ... } 來代替：

<router-link :to="{ name: 'someRoute', force: true, state: { message: 'Some Message' } }">Some link</router-link>

現在，在頁面的程式碼中，我從 history.sate 讀取屬性，並將該值放入我需要的任何屬性中。

如果 url/route 本身沒有更改，您需要有一個更新掛鉤並使用 force: true

public created() {
    this.message = window.history.state.message;
}

public updated() {
    this.message = window.history.state.message;
}

PS history.state 有一些限制，因此在其他情況下，更改日誌中的其他建議之一可能會更好