Nuxt 以编程方式传递道具，通过路由器答案

【问题标题】：Nuxt pass props programmatically, trough routerNuxt 以编程方式传递道具，通过路由器
【发布时间】：2021-01-02 02:17:52
【问题描述】：

我正在使用 Nuxt

我在将数据从一个页面传递到另一个页面时遇到问题

我想以编程方式导航到其他页面，并将一些数据传递给其他页面（在本例中为它的 javascript 对象）

到目前为止，这是我的代码：

我有一个从中导航的组件：

this.$router.push({ path: 'page/add', props: { basket: 'pie' } });

这是一个我想获取数据的组件，它是一个 Nuxt 页面：

export default {
    components: { MyComponent },
    props: [
        'basket' // this is also empty
    ],
    async asyncData(data) {
     
        console.log(data); // data does not contain basket prop
      
    },
    meta: {
        breadcrumb: {
            path: '/page/add',
        },
    },
};
</script>

但是当我尝试访问道具、数据或 data.router 时，它不包含篮子道具？？

另外，我不想使用 query 或 params，因为它们会更改 URL
[1]：https://nuxtjs.org/

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案1】：

您可以使用localstorage 并将您的数据保存在其中：

localStorage.setItem("nameOfItem", Value);

如果你想在你完成后删除它：

localStorage.removeItem("nameOfItem");

【讨论】：

除了localstorage还有其他选择吗
@Loki 现在没有想到。你可以在参数或查询中添加它们，但你说你不想要。

【解决方案2】：

如果您不想使用查询或参数，我会查看 vuex 商店。它是一种非常酷的存储全局变量并在多个页面中使用的方式。

Vuex store

【讨论】：

谢谢，这是我想到的第二个选项

【解决方案3】：

要导航到不同的 URL，请使用 router.push。 此方法将新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL .

您要完成的操作与浏览器不符（历史记录等）或 http 协议（GET/POST）。

此外，当使用path 参数和其他变量时，这些将被忽略，根据documentation。

注意： 如果提供了路径，则忽略参数，而查询则不是这种情况，如上例所示。相反，您需要提供路线的名称或使用任何参数手动指定整个路径。

在这里使用 props 很可能是错误的方法，因为您永远无法将这些数据传递给组件。

【讨论】：