How do you pass data between VueJS components when using the Vue router?

Question

I have these routes setup:

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/group/:id',
      name: 'Group',
      component: GroupContainer,
      children: [
        {
          // when /group/:id/posts is matched
          path: 'posts',
          component: ViewPosts
        },
        {
          // when /group/:id/topics is matched
          path: 'topics',
          component: ViewTopics
        },
        {
          // when /group/:id/people is matched
          path: 'people',
          component: ViewPeople
        }
      ]
    }
  ]
})

So the group component has a template with the router view here

<template>
  <div class="group">
    I am a group page
    <router-view></router-view>
  </div>
</template>

So the group component ends up being the parent to the ViewPosts, ViewTopics, or ViewPeople, but, it doesn't directly contain the components.

What is a good system to pass data from the parent (Group) to the children (ViewPosts...) and allow the children to emit up to the parent?

Bert Bert · Accepted Answer · 2017-04-03T20:02:43

One way to do this is to add the properties and handlers to the router-view.

<div class="group">
  I am a group page
  <router-view :topics="topics"
           :people="people"
           :posts="posts"
           @topic-emitted="onTopicEmitted">
  </router-view>
</div>

Here is a quick example.

How do you pass data between VueJS components when using the Vue router?

1 Answers