[Vuejs]-Passing a prop as a prop to another component using vue router-link

by

0👍

✅

The vue-router doesn’t pass props from <router-link /> to a component being rendered in <router-view />. Moreover, <router-link /> doesn’t support props key in to param. It is just ignored.

What you can do instead is to:

  1. use any approach for state management as described in official documentation so both PageViewRecipe and RecipeCard can have an access to the same list of recipes.

  2. In PageViewRecipe pass id as a param to router-link. E.g.

<!-- BTW: you don't have to create path by yourself, let vue-router create it for you by combination of named router and params -->
<router-link :to="{ name: 'ViewRecipe', params: { id: recipe.id } }">
  <div>{{ recipe.title }}</div>
  <p>
    {{ recipe.description }}
  </p>
</router-link>
  1. Inside your PageViewRecipe access the list of recipes from the shared place (vuex, shared object, etc) and find the recipe with the id like so:
<template>
  <div>
    <div>{{recipe.id}}</div>
    <p>
      {{ recipe.description }}
    </p>
  </div>
</template>

<script>

export default {
  name: 'PageViewRecipe',
    props: {
      // passed by vue-router (from url), also available as this.$route.params.id
      id: {
        type: Number,
        required: true
      }
    },
    computed: {
       recipe() {
         // `this.recipes` comes from state management (for instance from vuex getter)
         return this.recipes.find(recipe => recipe.id === this.id);
       }
    }
  }
};
</script>

<style></style>

The nice thing about this approach is that you make only one API request and since you have an access to the full list of recipes you can handle some edge cases like when recipe with given id doesn’t exist.
But you can try to perform two API calls so you don’t have to deal with shared state management.

Leave a comment