登录  /  注册
Vue3:如何将参数发送到路由而不将它们添加到 Vue3 中的 url 中?
P粉465675962
P粉465675962 2023-12-11 13:07:20
[Vue.js讨论组]

在 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 本身传递它们的值,所以我不确定它是否还可能。

对此的任何想法都会有所帮助。

P粉465675962
P粉465675962

全部回复(1)
P粉431220279

最后我在变更日志中找到了一些相关内容:https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

显然,如果没有在 url 中显示,就不再可能通过参数发送属性。但幸运的是,他们给出了一些替代建议。 最适合我的情况的是使用 state: { ... } 代替:

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学