在 Vue js 路由之间传递大量数据答案

【问题标题】：Passing Huge data between Vue js routes在 Vue js 路由之间传递大量数据
【发布时间】：2016-02-14 12:43:59
【问题描述】：

我有一个使用 Vue.js 和 Vue Router 搜索航班的应用程序。

我有两个组件，第一个是搜索，它位于基本路由“/”上。当用户点击搜索时，它会向服务器发送请求并获取大量航班列表。

然后我需要在 '/results' 路由上调用结果组件并使用 v-for 显示结果。

我有两个问题，第一，我得到结果后如何手动重定向到'/results'。

其次，更重要的是，将结果数据传递给结果组件以使用的正确方法是什么？

【问题讨论】：

标签： javascript url-routing router vue.js

【解决方案1】：

在结果组件中，您可以将转换挂钩放在 route 对象中。在这里阅读：http://vuejs.github.io/vue-router/en/pipeline/hooks.html

activate 钩子在组件被激活时运行，并且在激活钩子运行之前组件不会出现。这是该页面上的示例，与您的类似：

route:{
  activate: function (transition) {
    return messageService
      .fetch(transition.to.params.messageId)
      .then((message) => {
        // set the data once it arrives.
        // the component will not display until this
        // is done.
        this.message = message
    })
  }
}

所以基本上，当他们点击搜索时，您将他们发送到/results，这个钩子将处理两者之间的数据加载。

这是一个使用 vue-router 的邮件应用程序的高级示例，它展示了许多实际的转换钩子：https://github.com/vuejs/vue-router/tree/dev/example/advanced

【讨论】：

谢谢。现在我知道如何从搜索组件访问参数，但我无法设置组件的参数，我尝试了 this.$route.b = this.a;但它不会改变它。我是在搜索组件的就绪功能中完成的。