我有一个原型，我使用的是vue.js和vue-router。
OnePlatform App.vue包含我的 <controls:ExtendedLabel FontName="Kristen ITC"
FontSize="20"
FriendlyFontName="Kristen ITC"
HorizontalOptions="StartAndExpand"
Text="This uses 'FontName' = 'Kristen ITC' set in XAML and 'OnPlatform' properties, size 20">
<controls:ExtendedLabel.FontFamily>
<OnPlatform x:TypeArguments="x:String"
iOS=""
Android=""
WinPhone="Kristen ITC"/>
</controls:ExtendedLabel.FontFamily>
</controls:ExtendedLabel>
安装点。应用程序还包含基于我在共享状态中存储的位置数据的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-viewstate.js：
Location <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>
组件包含我用来触发路由器的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：
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调用的组件作为道具传递给定的位置状态实例{点击{1}}。
我遇到的问题是，虽然我知道文档说你可以做到这一点，但他们并没有解释如何做到这一点，而我却无法弄清楚如何做到这一点。我尝试将位置绑定到v-link中的router-view：
App.vue并将其绑定到<router-view :location="location"></router-view>
中的占位符：
router-view两者都不奏效。
这样做的正确方法是什么？
我在这里有一个问题的WebpackBin演示：http://www.webpackbin.com/4kDRbt28W
答案 0 :(得分：1)
对于那些有趣的人：我们在gitter上找到了它。
解决方案是根本不传递对象，而是将其ID作为URL中的参数传递（例如/details/1827），然后从组件中的商店获取该ID的对象。
优点：可以直接从外部源导航到URL，应用程序状态也可以。