How can I get vue-router data into the parent template?

Question

I have 2 route components:

1) A people product list component 2) A product detail component

The list shows the products and then there is a router-link to that product using history in the router definition/scope.

What I am trying to achieve is to get the data from the parent list routes into the child detail product template.

So I am working with vuex as I am storing the data in the store method. Below is the gist example with the setup I have got.

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

The PeopleListing component works well and when clicking the router link it goes to the correct url and the data in the vue debug looks okay for vuex as below:

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)

What I am trying to do is basically render the data so it shows the router data within the homepage still and not look like it is going to another page which is what it is doing at the moment. The journey I am looking to create is as follows:

1) index page renders the PeopleListing 2) when clicking the it opens some animation within that template 3) the animation then renders the data from that clicked route such as '/products/the-product-title'

On point 3) we have to try and get all data attributes from that object.

Is it possible with the setup that I have got in my gist?

Thanks in advance!!

If I've understood it correctly. It could work like in this fiddle. Animating is a bit tricky for usage with animate.css but that's also added in the fiddle. If the fiddle is like you need it, please let me know and I'll write an answer with some details. — AWolf
@AWolf is there a way the children templates can be animated inside each object you click so slide under each one like an accordian affect? — M dunbavan

Srinivas Damam Srinivas Damam · Accepted Answer · 2017-02-16T11:14:45

'product/:handle' is a child route for the '/' route, as you want to nest them.
Your router should look like this.
As you want to pass data to your route using params. When props is set to true, the route.params will be set as the component props.

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

How can I get vue-router data into the parent template?

1 Answers