CODEWITHSUNDEEP
javascriptvue.js
Mahmud Adam
Mahmud Adam

Reputation: 3579

Sibling components in Vue.js with vue-router?

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

Upvotes: 1

Views: 1163

Answers (1)

Jeff
Jeff

Reputation: 25211

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

Upvotes: 2

Related Questions