У меня есть прототип, который я использую vue.js и VUE-маршрутизатор.пройти опору от V-Link в vue.js с вю-маршрутизатор
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>
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'}]}
]
Location.vue компонент Удерживает v-links, который я использую для запуска маршрутизатора:
Местоположение:
<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), когда щелкнул конкретное местоположение v-link-х.
Проблема, с которой я сталкиваюсь, заключается в том, что, хотя я знаю, что документы говорят, что вы можете это сделать, они не объясняют, как это сделать, и я не смог понять, как это сделать. Я пытался привязки местоположения к router-view в App.vue:
<router-view :location="location"></router-view>
И связывая его с заполнителем в router-view:
<router-view>
<details :location="location"></location>
</router-view>
Ни один из которых работают.
Каков правильный способ сделать это?
У меня есть WebpackBin демо проблемы здесь: http://www.webpackbin.com/4kDRbt28W