javascript - pass a prop from a v-link in vue.js with vue-router -

i have prototype i'm using vue.js, , vue-router in.

import vue 'vue' import vuerouter 'vue-router'  vue.use(vuerouter)   let router = new vuerouter  import app './app.vue' import details './details.vue' import pics './pics.vue'  router.map({   '/details':{     name: 'details',     component: details   },   '/pictures':{     name: 'pics',     component: pics   } })  router.start(app, '#app') 

app.vue contains router-view mounting point. app contains list of location components based on location data stored in shared state:

app.vue:

<script>     import state './state.js'     import location './location.vue'      module.exports = {       components: {location},       data: () => {         return {           name: 'app',           locations: state.locations         }       }     } </script>  <template>   <div class="app-container">      <h2 class="heading">locations</h2>     <div class="body">       <div class="column">         <location v-for="location in locations" :location="location"></location>             </div>       <div class="column">         <router-view></router-view>             </div>     </div>   </div>  </template> 

state.js:

exports.locations = [   { name: 'home', address: '123 main st', pics: [{src: '/images/123.png'}]},   { name: 'work', address: '555 avenue st', pics: [{src: '/images/lol.jpg'}, {src: '/images/wrkn.jpg'}]},   { name: 'some landmark', address: '42 e west st', pics: [{src: '/images/coolpic.jpg'}, {src: '/images/qwerty.jpg'}]} ] 

the location.vue component holds v-links i'm using trigger router:

location.vue:

<script>     module.exports = {       props:['location'],       data: () => {         return {name: 'location'}       }     } </script>  <template>   <div class="location-container">     <h3>{{location.name}}</h3>     <a v-link="{name: 'pics'}">pics</a>     <a v-link="{name: 'details'}">details</a>   </div> </template> 

what pass in given location state instance prop component called router (either details.vue or pics.vue) when particular location's v-link clicked.

the problem i'm having while know docs can this, don't explain how , i've not been able figure out how. tried binding location router-view in app.vue:

<router-view :location="location"></router-view> 

and binding placeholder within router-view:

<router-view>     <details :location="location"></location> </router-view> 

neither of work.

what's proper way of doing this?

i have webpackbin demo of problem here: http://www.webpackbin.com/4kdrbt28w

for intersted: figured out on gitter.

solution not pass object @ all, pass it's id param in url (e.g. /details/1827), object id store in component.

advantages: urls can directly navigated external sources , application state fine.