title: Vue cli passing props (data) through router-link
body: <p>I am using <code>Vue-cli</code> with vue-router installed, inside my <code>App.vue</code> I've got <code>&lt;router-link  to="/about" &gt;About&lt;/router-link&gt;</code> in which it's going to display the content of about component on click. Now, I would like to pass props data to <code>About.vue</code> component from `` App.vue. Adding :myprops="myprops" inside <code>&lt;router-link to="/about" :myprops="myprops"&gt;About&lt;/router-link&gt;</code> didn't work that's why I add the following to <code>App.vue</code> :</p>
  
  <pre><code>&lt;script&gt;
  import About from './components/About.vue';
  export default {
    name: 'App',
   components:{'my-about':About}
    data(){return {...}
    },
  props:{myprops:[{.....}]}
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Inside <code>About.vue</code> component I did <code>props:['myprops']</code> to get the props data and by using <code>{{myprops}}</code> to display it.
  Now, if inside <code>App.vue</code>, I add <code>&lt;my-about :myprops="myprops"&gt;&lt;/my-about&gt;</code> then the props data will be handed over to <code>About.vue</code> and will be display but the content of <code>About.vue</code> also will be display on my <code>App.vue</code> page and also, it is going to repeat itself inside <code>About.vue</code>. I don't want that. I just need to pass the <code>myprops</code> data to <code>About.vue</code> component without displaying the <code>About.vue</code> content inside <code>App.vue</code>.
  And, this is my path code inside <code>router/index.js</code> for reference:
  <code>{ path: '/about', component: About  }</code></p>
  
  <p>How can I be able to do that?</p>