Vue.js，将数据传递给另一个路由上的组件

Question

将数据从一页传递到另一页的简单任务让 Vue.js 的新手非常头疼这是我的路由器

我正在“/”页面上呈现一个表单，它发出一个 API 请求，

我只想将数据传递到另一个包含另一个组件的路由页面

Vue这么难做吗？今天真让我头疼。从 API 获取数据，保存并发送到另一个组件。我该怎么做？

Answer 1

如果你想全局保存它，你可以使用事件总线或 VueX 存储来包含它，然后在你需要访问它时从这个事件总线或存储中保存和加载它。

如果您只想在这两个组件之间传递它，并且仅当从第一个页面访问第二个页面时，您可以按照本指南将属性传递给路由参数：https://router.vuejs.org/en/essentials/passing-props.html

Answer 2

正如 Antony 所说，由于您已经在 router/index.js 中启用了 props，您可以像这样在 router.push 中传递参数：

router.push({
    name: 'events',
    params: {
        items: data
    }
});

那么你将能够在EventsDisplay.vue

中获得items作为道具

export default {
    name: 'eventsDisplay',
    props: ['items'],
};

Answer 3

尝试使用 Vuex

在源组件中

this.$store.commit('changeDataState', this.$data);
this.$router.push({name: 'user-post-create'});

在目标组件中

created () {
    console.log('state', this.$store);
    this.$store.getters.Data;
}

Answer 4

在你的 vue 路由器中添加 props true


{
    path: "/pay-now",
    name: "pay",
    props: true,
    component: () =>
      import(/* webpackChunkName: "about" */ "../components/account/pay.vue"),
    beforeEnter: AuthGuard,
  },

然后像这样用路由器传递道具

        this.$router.push({ 
        name: "pay",
        params: {
        result:this.result,
      }
      });

Vue.js，将数据传递给另一个路由上的组件

Vue.js, pass data to component on another route

javascript

rest

vue.js

vue-router

vuejs2