Как я могу получить данные vue-router в родительский шаблон?

Question

У меня есть 2 составляющие маршрут:

1) Народ продукта список компонент 2) Компонент детали продукта

В списке показан продукты, а затем есть маршрутизатор-ссылка на этот продукт, используя историю в маршрутизаторе определение/сфера.

Я пытаюсь получить данные из маршрутов родительского списка в шаблон детского детального продукта.

Так что я работаю с vuex, поскольку храню данные в методе хранилища. Ниже приведен пример с настройкой, которую я получил.

https://gist.github.com/mdunbavan/5cb756ff60e5c5efd4e5cd332dcffc04

PeopleListing компонент работает хорошо, и при нажатии на ссылку маршрутизатора он идет к правильному URL и данные в вю отладки выглядит хорошо для vuex, как показано ниже:

state:Object 
currentProduct:undefined 
products:Array[0] 
route:Object 
from:Object 
fullPath:"/products/copy-of-long-shirt-dress-tudor" 
hash:"" 
meta:Object (empty) 
name:"product" 
params:Object 
path:"/products/copy-of-long-shirt-dress-tudor" 
query:Object (empty) 

Что я попытка сделать это в основном визуализировать данные, чтобы они отображали данные маршрутизатора на домашней странице и не выглядели так, как будто она идет на другую страницу, что и делается на данный момент. Путешествие Ищу создать следующим образом:

1) индексная страница оказывает PeopleListing 2) при нажатии на это открывает некоторые анимации в пределах этого шаблона 3) анимация затем делает данные из этого щелкнул маршрута, таких как '/ products/the-product-title'

В пункте 3) мы должны попытаться получить все атрибуты данных от этого объекта.

Возможно ли это с установкой, которую у меня есть в моем стиле?

Спасибо заранее!

Answer 1

'product/:handle' - это детский маршрут для маршрута '/', так как вы хотите их разложить.
Ваш маршрутизатор должен выглядеть следующим образом.
Как вы хотите передать данные на свой маршрут с помощью параметров. Если для реквизита установлено значение true, route.params будет установлен как компонентный реквизит.

const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
     { path: '/', component: PeopleListing, 
      children: [ 
      { name: 'product', path: '/products/:handle', component: ProductDetail, props: true } 
      ] 
     }, 
    ] 
});