title: Passing props from one component to another when the transition happens using router.push
body: <p>I currently have a Vue.js component called <code>Summoner.vue</code> which is rendered thanks to the router when a user visits the following URL - <code>http://localhost:8080/summoner/username</code></p>
  
  <p>In that component I have a <code>&lt;div&gt;</code> element which triggers a method on click, that sends the user to a new URL - <code>http://localhost:8080/summoner/username/match/4132479262</code> which renders a different component <code>Match.vue</code>. Like this:</p>
  
  <pre><code>&lt;div @click='specificMatch(match.gameId)'&gt;
  
  specificMatch(gameId){
      router.push('/summoner/' + this.summoner + '/match/' + gameId)
  }
  </code></pre>
  
  <p>Now all I want to do is pass an object as props from the first component to the second one, but I'm not sure how to do that because I'm using the router. Normally I'd pass props like this - <code>&lt;summoner v-bind:match="match.id"&gt;&lt;/summoner&gt;</code> but I guess that doesn't work in my case since I'm using router.</p>
  
  <p>And these are my routes:</p>
  
  <pre><code>export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
      {
          path: '/',
          name: 'home',
          component: Home
      },
      {
          path: '/summoner/:summonerName',
          name: 'summoner',
          component: Summoner
      },
      {
          path: '/summoner/:summonerName/match/:matchId',
          name: 'match',
          component: Match
      }
      ]
  })
  </code></pre>