title: Passing ID through router-link in Vue.js
body: <p>I have 2 router links that link to the same page (definition page) but has different ids, in my definition page I have an if else loop that checks the id and then posts the apropriate definition for that id.my problem is that my loop can't properly read my id and goes straight to my else statment, this is the closest that I've gotten it to work.</p>
  <p><strong>My 2 router-links in page 1</strong></p>
  <pre><code>&lt;router-link :to=&quot;{ path: '/Pulse/Definition',id:'Alignment'}&quot; v-bind:tooltip=&quot;Alignment&quot; append&gt;&lt;a &gt;Read more &gt;&lt;/a&gt;&lt;/router-link&gt;
  &lt;router-link :to=&quot;{ path: '/Pulse/Definition'}&quot; id=&quot;Trust&quot; append&gt;&lt;a &gt;Read more &gt;&lt;/a&gt;&lt;/router-link&gt;
  </code></pre>
  <p><strong>My definition page</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;PulseDefinition page row&quot;&gt;
          &lt;h2 v-if=&quot; id=='Alignment'&quot;&gt;hello world {{id}}&lt;/h2&gt;
          &lt;h2 v-else-if=&quot; id=='Trust'&quot;&gt;hello world {{id}}&lt;/h2&gt;
          &lt;h2 v-else&gt;Sorry try again&lt;/h2&gt;
          
      &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  .PulseDefinition{
      margin-top:2.5rem;
      margin-left:3rem;
      background-color: aquamarine;
      width:50rem;
      height:50rem;
      
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>Router</strong></p>
  <pre><code>import Vue from 'vue';
  import Router from 'vue-router';
  import Community from '../components/PulseCommunity';
  import Home from '../components/Home';
  import Definition from '../components/Definition.vue';
  
  Vue.use(Router)
  
  export default new Router({
      routes:[
          {
              path:'Tuba',
              name:'Tuba',
              component: Default
          },
          {
              path:'/Pulse',
              name:'Pulse',
              component:PulseNav,
              children:[{
                  path:'/Pulse/Overview',
                  name:'Overview',
                  component:Overview
              },
              {
                  path:'/Pulse/Personal',
                  name:'Personal',
                  component:Personal
              },
              {
                  path:'/Pulse/Community',
                  name:'Community',
                  component:Community
              },
              {
                  path:'/Pulse/Definition/:id',
                  name:'Pulse Definition',
                  component:Definition
              }
              
              ]
          },
          {
              path:'/Coaching',
              name:'Coaching',
              component:Coaching
          },
          {
              path:'/Comunication',
              name:'Comunication',
              component:Comunication
          },
          {
              path:'/Home',
              name:'Home',
              component:Home
          },
      ]
  })
  </code></pre>