我有一个正在使用 vue.js 和 vue-router 的原型(prototype)。
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
的列表基于存储在我的共享状态中的位置数据的组件:
应用程序.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
我用来触发路由器:
位置.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>
我想要的是将给定位置状态实例作为 Prop 传递给路由器调用的组件( Details.vue
或 Pics.vue
),当特定位置为 v-link
时被点击。
我遇到的问题是,虽然我知道文档说你可以做到这一点,但他们没有解释如何做到这一点,而且我无法弄清楚如何做到这一点。我尝试将位置绑定(bind)到 router-view
在App.vue
:
<router-view :location="location"></router-view>
并将其绑定(bind)到 router-view
内的占位符:
<router-view>
<details :location="location"></location>
</router-view>
这两者都不起作用。
这样做的正确方法是什么?
我在这里有一个问题的 WebpackBin 演示:http://www.webpackbin.com/4kDRbt28W
最佳答案
对于那些感兴趣的人:我们在 gitter 上找到了答案。
解决方案是根本不传递该对象,而是将其 ID 作为 URL 中的参数传递(例如 /details/1827
),然后从存储中的存储中获取该 ID 的对象组件。
优点:可以直接从外部源导航到 URL,并且应用程序状态良好。
关于javascript - 使用 vue-router 从 vue.js 中的 v-link 传递 prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38309810/