VueJS How to pass props between two components using <router-view>

Question

I'm new to vue.js and I'm tryeing to build a little application, where I in one case need to pass a prop between two components. For some reason it does not work and I don't know why.

Here is the first component, the Playlist.Vue component:

<template>
 <div class="playlists-con">
   <div class="playlists">
     <h1>Available Playlists for category: {{id}}</h1>
     <ul>
        <router-link v-for="playlist in playlists" :to="`details/${playlist.id}`" tag="li" active-class="active" exact>
            <div class="playlist-wrapper">
                <div class="imgWrap">
                    <img :src="playlist.images[0].url" />    
                </div>
                <a>{{playlist.name}}</a>
            </div>
        </router-link>
    </ul>
  </div>
  <div>
    <router-view category="id"></router-view>
  </div>

 </div>
</template>

<script>

export default {
   data() {
     return {
        id: this.$route.params.id,
        playlists : []
    }
  },
  watch: {
    '$route'(to, from) {
        this.id = to.params.id
    }
  },
  methods: {
    fetchPlaylist() {
        this.$http.get('' + this.id + '/playlists')
        .then(response => {
            return response.json()
        })
        .then(data => {
            const playlist_items = data.playlists.items;

            for (let key in playlist_items) {
              this.playlists.push(playlist_items[key])
            }                
        })
       }
    },
    created() {
       this.fetchPlaylist();
    }
}
</script>

from the Playlist component, I'm supposed to be able to get to the Playlist details. I also want to pass the category prop to the PlaylistDetails.vue, so I tried to do <router-view category="id"></router-view> - but that does not work.

PlaylistDetails.vue component (where I want to display the category prop, passed from the Playlist.vue component) :

<template>
  <div class="playlist-details">
    <router-link :to="`/categories/${category}`">Go to playlists</router-link>
    <h1>Playlist Details for Playlist: <span class="playlist-name">{{playlistName}}</span></h1>
    <h1>category: {{ category }}</h1>
    <ul>
      <li v-for="track in tracks">
          <p>{{ track.track.artists[0].name}} - {{ track.track.name }}</p>
      </li>
   </ul>
 </div>
</template>

<script>

export default {
  props: ['category'],
  data() {
    return {
        id: this.$route.params.id,
        tracks : [],
        playlistName: ''
    }
  },
  watch: {
    '$route'(to, from) {
        this.path = from.params.path
    }
  },     
  beforeRouteEnter(to, from, next) {
    if (true) {
        next();
    } else {
        next(false);
    }
  },
  methods: {
    fetchPlaylistDetails() {
        this.$http.get('https://api.spotify.com/v1/users/spotify/playlists/' + this.id)
        .then(response => {
            return response.json()
        })
        .then(data => {
            const playlist_tracks = data.tracks.items;
            for (let key in playlist_tracks) {
                this.tracks.push(playlist_tracks[key])
            }
            this.playlistName = data.name;
        })
    }
  },
  created() {
    this.fetchPlaylistDetails();
  }
 }
</script>

What am I doing wrong?

UPDATE

Here is my router configuration:

export const routes = [
   {
     path: '', default: App
   },
   {
     path: '/categories/:id/playlists', props: true, component: Playlists
   },
   { 
     path: '/categories/:id/details/:id', component: PlaylistDetails, props: true, beforeEnter: (to, from, next) => {
    next();
   }},
   {path: '*', redirect: '/'}
]

Answer 1

There're 2 ways to pass data between non-parent components. I would recommend to take a look at them, before trying solve issue with router-view:

• Using Vue.bus
• Using Vuex

Answer 2

You are half way there, you defined props:true on the route, which means every dynamic property that is matched in the url would be passed as a prop, so :

//this will pass 'id' as a prop to the playlist component
{
   path: '/categories/:id/playlists', props: true, component: Playlists
},

So inside the playlist component you'll have this:

props: ['id'],
data() {
     return {   
        playlists : []
    }
  },

The same is true for the details component:

 //change the name of the param to distinguish it from the category id
{ 
     path: '/categories/:id/details/:detailsId', component: PlaylistDetails, props: true, beforeEnter: (to, from, next) => {
    next();
   }},

And in PlaylistDetails.vue:

props: ['detailsId'],
....
methods: {
    fetchPlaylistDetails() {
        this.$http.get('https://api.spotify.com/v1/users/spotify/playlists/' + this.detailsId)
        .then(response => {
            return response.json()
        })
        .then(data => {
            const playlist_tracks = data.tracks.items;
            for (let key in playlist_tracks) {
                this.tracks.push(playlist_tracks[key])
            }
            this.playlistName = data.name;
        })
    }
  },