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

Question

I have an application which searches for flights using Vue.js and Vue Router.

I have two components, first one is search, which is on the base route '/'. When user clicks on search, it will send a request to server and gets a huge list of flights.

Then I need to call the result component on '/results' route and show the results using v-for.

I have two questions, first, how can I manually redirect to '/results' after I get the results.

Second and more important, what is the proper way of passing the results data to results component to use?

Answer 1

Inside your results components, you can put transition hooks in the route object. Read here: http://vuejs.github.io/vue-router/en/pipeline/hooks.html

The activate hook runs when a component is activated, and the component wont appear until the activate hook has run. Here's the example on that page, which would be similar to yours:

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
    })
  }
}

So basically when they click search you send them to /results and this hook will handle loading the data in between.

Here's an advanced example of a mail app using vue-router that shows off a lot of the transition hooks in action: https://github.com/vuejs/vue-router/tree/dev/example/advanced