Передача Огромные данные между маршрутами Vue js

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