Vue.js 中的兄弟组件与 vue-router？答案

【问题标题】：Sibling components in Vue.js with vue-router?Vue.js 中的兄弟组件与 vue-router？
【发布时间】：2016-11-08 22:00:57
【问题描述】：

我有一些组件映射到几个不同的路由，我想知道为每个路由创建的组件在数据如何传递方面是否被视为同级组件？不清楚这个结构中哪个组件是父组件：

PageOne = Vue.extend( {
   template: "#page-one"
})
PageTwo = Vue.extend({
   template: "#page-two"
})
Home = Vue.extend({
  template: "#home"
})
var router = new VueRouter()
router.map({
  '/': {
    component: Home
  },
 '/PageOne': {
   component: PageOne
  },
'/PageTwo': {
  component: PageTwo
 }
})


var App = Vue.extend({})
router.start(App, "#app")

所以如果我想将数据从Home 路由传递到PageOne，我需要使用全局事件总线，还是可以使用道具将数据从一个路由传递到下一个？这是一个演示：http://codepen.io/p-adams/pen/kXwxRR

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您应该使用 Vuex 的全局事件总线或状态管理，或者将它们设置为嵌套路由 (http://router.vuejs.org/en/nested.html)：

router.map({
  '/': {
    component: Home,
    subRoutes: {
      '/PageOne': {
        component: PageOne
      },
      '/PageTwo': {
        component: PageTwo
      }
    }
  }
})

如果你这样做，你可以将道具传递给你的<router-view>：

<div id="app">
  <router-view :foo="bar"></router-view>
</div>

http://router.vuejs.org/en/view.html

【讨论】：