Vue3:如何在不将它们添加到Vue3中的url的情况下向路由发送params？

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',时，消息就会很好地传递出来，但是我只想传递消息，而不会在url中显示它。

我见过几个使用这种方法的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

最后，我在changelog：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22中找到了这方面的一些信息。

显然，在没有显示在url中的情况下，不可能通过params发送属性。但幸运的是，他们给出了一些替代建议。对我的情况最有效的方法是使用state: { ... }：

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

现在，在页面的代码中，我从history.sate读取该属性，并将该值放入我需要的任何属性中。

如果url/路由本身没有改变，您需要有一个更新挂钩并使用force: true

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

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

PS history.state有一些局限性，因此在其他情况下，变更日志中的其他建议可能会更好地工作。