带有vue-router的Vue.js中的兄弟组件？

Question

I have a few of components mapped to several different routes, and I am wondering if the components created for each route are considered sibling components in terms of how data is passed around? It is unclear which component is the parent component in this structure:

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")

So if I want to pass data from the Home route to PageOne , would I need to use a global event bus, or could I use props to pass the data from one route to the next? Here is a demo: http://codepen.io/p-adams/pen/kXwxRR

Answer 1

You should either use a global event bus or state management with Vuex, OR set these up as nested routes ( http://router.vuejs.org/en/nested.html ):

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

If you do it that way, you can pass props to your <router-view> :

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

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