Referencing router-link params data in vuejs

Question

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

Michael · Accepted Answer · 2017-12-10 01:52:02Z

2

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).

answered Dec 10, 2017 at 1:52

Michael

2,6312 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MGS Over a year ago

Thanks alot, I referenced it using $props.id in the template body

Michael Over a year ago

You can just use id in template body

MGS Over a year ago

I tried to reference it like this in the body {{ id }}, it doesn't work

Collectives™ on Stack Overflow

Referencing router-link params data in vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related