Vue3: Wie sende ich Parameter an eine Route, ohne sie zur URL in Vue3 hinzuzufügen?

Question

Gibt es in Vue3 eine Möglichkeit, Eigenschaften an Routen zu übergeben, ohne den Wert in der URL anzuzeigen?

Ich definiere die Route so:

{
    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
}

Ich nenne diese Route:

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

Wenn ich den Pfad in path: '/someRoute/:message', ändere, wird die Nachricht problemlos zugestellt, aber ich möchte nur, dass die Nachricht zugestellt wird, ohne dass sie in der URL angezeigt wird.

Ich habe einige Vue2-Beispiele gesehen, die diesen Ansatz verwenden (z. B. https://stackoverflow.com/a/50507329/1572330), aber anscheinend funktionieren sie in Vue3 nicht mehr.

Außerdem alle Beispiele in der Vue3-Dokumentation (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js/https://v3.router.vuejs.org/ (guide/essentials/passing-props.html) geben ihren Wert über die URL selbst weiter, daher bin ich mir nicht sicher, ob das noch möglich ist.

Alle Gedanken dazu wären hilfreich.

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 有一些限制，因此在其他情况下，更改日志中的其他建议之一可能会更好