帶有vue-router的Vue.js中的兄弟組件？

Question

我有一些組件映射到幾個不同的路由，並且我想知道為每個路由創建的組件在數據傳遞方式方面是否被視為同級組件？ 目前尚不清楚哪個組件是此結構中的父組件：

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 ，是否需要使用全局事件總線，還是可以使用props將數據從一個路由傳遞到下一個路由？ 這是一個演示： http : //codepen.io/p-adams/pen/kXwxRR

Answer 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