passiert eine Stütze von einem V-Link in vue.js mit vue-Router

Question

Ich habe einen Prototyp, dass ich vue.js bin mit und vue-Router in.

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 


let router = new VueRouter 

import App from './App.vue' 
import Details from './Details.vue' 
import Pics from './Pics.vue' 

router.map({ 
    '/details':{ 
    name: 'details', 
    component: Details 
    }, 
    '/pictures':{ 
    name: 'pics', 
    component: Pics 
    } 
}) 

router.start(App, '#app') 

App.vue enthält meine router-view Befestigungspunkt. App enthält auch eine Liste der Location Komponenten auf den Standortdaten gespeichert in meinem gemeinsamen Zustand basiert:

App.vue:

<script> 
    import state from './state.js' 
    import Location from './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'}]} 
] 

Die Location.vue Komponente hält die v-links, die ich verwende, um den Router auszulösen:

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> 

Was Ich mag würde wäre in der gegebenen Lage Zustand Instanz als Stütze auf die Komponente vom Router (entweder Details.vue oder Pics.vue), wenn der jeweilige Standort des gerufenen passiert v-link geklickt wird.

Das Problem, das ich habe, ist, dass, während ich weiß, dass die Docs sagen, Sie können dies tun, erklären sie nicht, wie dies zu tun ist und ich nicht in der Lage gewesen, herauszufinden, wie. Ich versuchte Lage zum router-view in App.vue Bindung:

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

Und die Bindung an einen Platzhalter innerhalb router-view:

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

Keiner von denen Arbeit.

Was ist der richtige Weg, dies zu tun?

Ich habe eine WebpackBin Demo des Problems hier: http://www.webpackbin.com/4kDRbt28W

Answer 1

Für diejenigen intersted: Wir gemustert es auf gitter aus.

Lösung ist das Objekt überhaupt nicht übergeben, aber übergeben Sie seine ID als Parameter in der URL (z. B. /details/1827), dann holen Sie sich das Objekt für diese ID aus dem Speicher in der Komponente.

Vorteile: URLs können direkt von externen Quellen navigiert werden und der Anwendungsstatus ist in Ordnung.