[Vuejs]-Vue passing props via router-link with dynamic routing

by

1👍

a route with props: true will automatically assign route params to a component’s props. You can access the props as you would normally:

<template>
  <div>{{ flower.id }} {{ flower.name }} {{ flower.description }}</div>
</template>

<script setup>
const flower = defineProps(['id', 'name', 'description']);
</script>

The only additional thing you need to do is make sure all the params are part of your URL. If the param isn’t in the URL, it won’t be included as a param and it won’t be assigned to a prop:

{
  path: "/flower/:id/:name/:description",
  name: "SingleFlower",
  component: () => import("@/components/SingleFlower/SingleFlower.vue"),
  meta: { requiresAuth: true },
  props: true 
},

If a URL like that is not desirable, I would suggest combining vue-router with a state management library like Pinia. Store your flower data in your Pinia store, then navigate using just :id, and finally load flower data by id when the new view is created/mounted.

👤yoduh

Leave a comment