title: VueJS How to pass props between two components using <router-view>
body: <p>I'm new to <code>vue.js</code> 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. </p>
  
  <p>Here is the first component, the Playlist.Vue component:</p>
  
  <pre><code>&lt;template&gt;
   &lt;div class="playlists-con"&gt;
     &lt;div class="playlists"&gt;
       &lt;h1&gt;Available Playlists for category: {{id}}&lt;/h1&gt;
       &lt;ul&gt;
          &lt;router-link v-for="playlist in playlists" :to="`details/${playlist.id}`" tag="li" active-class="active" exact&gt;
              &lt;div class="playlist-wrapper"&gt;
                  &lt;div class="imgWrap"&gt;
                      &lt;img :src="playlist.images[0].url" /&gt;    
                  &lt;/div&gt;
                  &lt;a&gt;{{playlist.name}}&lt;/a&gt;
              &lt;/div&gt;
          &lt;/router-link&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;router-view category="id"&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  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 =&gt; {
              return response.json()
          })
          .then(data =&gt; {
              const playlist_items = data.playlists.items;
  
              for (let key in playlist_items) {
                this.playlists.push(playlist_items[key])
              }                
          })
         }
      },
      created() {
         this.fetchPlaylist();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>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 <code>&lt;router-view category="id"&gt;&lt;/router-view&gt;</code> - but that does not work.</p>
  
  <p>PlaylistDetails.vue component (where I want to display the category prop, passed from the Playlist.vue component) :</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="playlist-details"&gt;
      &lt;router-link :to="`/categories/${category}`"&gt;Go to playlists&lt;/router-link&gt;
      &lt;h1&gt;Playlist Details for Playlist: &lt;span class="playlist-name"&gt;{{playlistName}}&lt;/span&gt;&lt;/h1&gt;
      &lt;h1&gt;category: {{ category }}&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li v-for="track in tracks"&gt;
            &lt;p&gt;{{ track.track.artists[0].name}} - {{ track.track.name }}&lt;/p&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  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 =&gt; {
              return response.json()
          })
          .then(data =&gt; {
              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();
    }
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is my router configuration:</p>
  
  <pre><code>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) =&gt; {
      next();
     }},
     {path: '*', redirect: '/'}
  ]
  </code></pre>