CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
MGS
MGS

Reputation: 456

Referencing router-link params data in vuejs

I have this component

<div class="card col-4" style="width: 22rem;">
  <img class="card-img-top" src="../assets/images/olu.jpg" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">{{ stories.articles[0].summary }}</p>
    <router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>

  </div>
</div>

Notice the router-link tag:

<router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>

It's being routed to display an article.vue component which is shown below:

<template>
  <div>
    <div class="container row">
      <h1 class="display-3 col">Article in view</h1>

    </div>

    <div class="container">
      <img src="../assets/images/olu.jpg"/>
      <article>
        some text
      </article>

    </div>

  </div>


</template>

<script>
  // /console.log(params.id);
  export default {
    name: 'article',
    data() {
      return {

      }
    }
  }
</script>

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.

I've tried looking through the documentation and a few articles, but so far I haven't been able to find a suitable solution.

Kind regards

Upvotes: 0

Views: 2051

Answers (1)

Michael
Michael

Reputation: 2631

You can set the props property to true on the article route as described in Passing Props to Router Component section.

{
  name: 'article'
  path: '/viewArticle/:id',
  component: ArticleView // whatever you named the component
  props: true
}

Then you your ArticleView component you can add an id prop:

<script>
  export default {
    name: 'article',
    props: ['id'],
    data() {
      return {
      }
    }
  }
</script>

The id is now available to you directly on the component and you can fetch the article.

If you want to you can also preload the article so that the actual article is passed instead of the id.

You do that by adding beforeRouteEnter to the component:

 <script>
  export default {
    name: 'article',
    props: ['id'],
    data() {
      return {
        article: null,
      }
    },
    beforeRouteEnter (to, from, next) {
       // your ajax stuff goes here
       // I use axios in this example
       axios.get(`/api/article/${to.params.id}`)
         .then((article) => {
           next(vm => {
             vm.article = article
           })
         })
         .catch(() => {
            next('/404')
         })
    }
  }
</script>

So before the router is entered it will fetch the article. This has the added advantage that all your component code can assume that you have the article loaded already. You don't have to deal with the case where it is loaded or not loaded.

In addition you can also access the matched route like this: this.$route and the router for navigation like this: this.$router (with r at the end).

Upvotes: 2

Related Questions