Question

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

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

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

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

第二个也是更重要的是，将结果数据传递给结果组件使用的正确方法是什么？

Answer 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

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

1 个答案: