Sibling components in Vue.js with vue-router?

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

Jeff · Accepted Answer · 2016-07-06 21:08:20Z

2

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

answered Jul 6, 2016 at 21:08

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sibling components in Vue.js with vue-router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related