Vue.js，将数据传递给另一条路线上的组件答案

【问题标题】：Vue.js, pass data to component on another routeVue.js，将数据传递给另一条路线上的组件
【发布时间】：2017-08-03 12:49:07
【问题描述】：

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

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

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

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

【问题讨论】：

你要传递什么数据？ activities?

标签： javascript rest vue.js vuejs2 vue-router

【解决方案1】：

正如安东尼所说，既然你已经在router/index.js 中启用了道具，你可以像这样在router.push 中传递参数：

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

那么您将能够在EventsDisplay.vue 中接收items 作为道具

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

【讨论】：

@EzhiMakov this.items 应该可以工作。由于它与此问题无关，您可以打开另一个问题并将代码粘贴到那里。
非常感谢，伙计，很抱歉之前的评论，这是我在刷新 /events 页面而不传递数据的情况下的愚蠢
谢谢它确实有效..浪费了这么多时间..终于得到了
@choasia，我想请你看一下与 Anthone Gore 的“全栈 Vue.js 2 和 Laravel 5”一书的 github 中的源代码相关的 Vue.JS 问题在这里：stackoverflow.com/questions/59245577/…？特别看看 EDIT: OP 的部分
就我而言（@vue/cli-service 版本 3.12.1），我无法通过 props 获取参数，但我从 this.$route.params.items 获取它

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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,
      }
      });

【讨论】：