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