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 示例（例如/sf/answers/3535513061/），但显然它们不再在 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;
}

PShistory.state有一些限制，因此在其他情况下，更改日志中的其他建议之一可能会更好