javascript - vue-router を使用して vue.js の v-link から prop を渡します

Question

vue.js と vue-router を使用しているプロトタイプがあります。

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 には私のrouter-viewマウント ポイントが含まれています。Locationアプリには、共有状態に保存されている位置データに基づくコンポーネントのリストも含まれています。

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>

状態.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'}]}
]

Location.vueコンポーネントは、ルーターをトリガーするために使用している を保持しますv-links。

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>

私が望むのは、特定の場所がクリックされたときに、ルーターによって呼び出されるコンポーネント (Details.vueまたはPics.vue) に、指定された場所の状態インスタンスを prop として渡すことです。v-link

私が抱えている問題は、ドキュメントがこれを行うことができると言っていることは知っていますが、これを行う方法を説明しておらず、方法を理解できていないことです. router-view私はin に場所をバインドしようとしましたApp.vue:

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

そして、それをプレースホルダーにバインドしますrouter-view：

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

どちらも機能しません。

これを行う適切な方法は何ですか？

ここに問題の WebpackBin デモがあります: http://www.webpackbin.com/4kDRbt28W