title: Referencing router-link params data in vuejs
body: <p>I have this component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card col-4" style="width: 22rem;"&gt;
    &lt;img class="card-img-top" src="../assets/images/olu.jpg" alt="Card image cap"&gt;
    &lt;div class="card-block"&gt;
      &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
      &lt;p class="card-text"&gt;{{ stories.articles[0].summary }}&lt;/p&gt;
      &lt;router-link :to="{path: '/viewArticle', params:{id:123}}"&gt;&lt;a class="btn btn-primary"&gt;Continue Reading&lt;/a&gt;&lt;/router-link&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice the router-link tag:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;router-link :to="{path: '/viewArticle', params:{id:123}}"&gt;&lt;a class="btn btn-primary"&gt;Continue Reading&lt;/a&gt;&lt;/router-link&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's being routed to display an article.vue component which is shown below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="container row"&gt;
        &lt;h1 class="display-3 col"&gt;Article in view&lt;/h1&gt;
  
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;img src="../assets/images/olu.jpg"/&gt;
        &lt;article&gt;
          some text
        &lt;/article&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  &lt;script&gt;
    // /console.log(params.id);
    export default {
      name: 'article',
      data() {
        return {
  
        }
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works absolutely fine. My question is very simple, how do I reference the id value passed into the router-link params property, inside this article.vue component, which is being returned whenever the /viewArticle path is hit, as shown in the 1st component above.</p>
  
  <p>I've tried looking through the documentation and a few articles, but so far I haven't been able to find a suitable solution.</p>
  
  <p>Kind regards </p>