0

I am using client side routing and have the route name be the object's name. I am linking to the Edit.vue component but if I want to render the age in that Edit component, how do I get that passed in? I know I have name accessible in the router params but I want the other fields in that object too, such as age.

App.vue

<div v-for="item in items">
    <router-link :to="`/edit/${item.name}`"> Edit ${item.name} </router-link>
</div>

data() {
   return {
       items: [ {name: "Carl", age: 23}, { name: "James", age: 43}]
   }
}

then in my router config, I have:

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/edit/:name",
    name: "Edit",
    component: () =>
      import(/* webpackChunkName: "edit" */ "../views/Edit.vue"),
  },
];
MangalinOctos2
  • 23
  • 2

2 Answers2

0

State management is the keyword, which might help for your further research. Especially vuex, as the most popular Vue state management library probably makes sense in your case (https://www.npmjs.com/package/vuex). There are tons of tutorials out there.

If you don't want to use a state management library, you can implement a simple version of it on your own by saving the data in the localstorage or in the cookies. Or - if it's just about the age, you also could add it to the query params.

There is also a pretty well described SO answer for a similar question: Vue: shared data between different pages

tho-masn
  • 1,126
  • 1
  • 7
  • 13
  • This does not answer the question in any way. – tauzN Sep 19 '21 at 19:39
  • Why? He has a parent route, where all the data is accessible, and he wants to show this data on all the detail pages. Vuex is the most popular solution for this problem. Or did I misunderstand the question? – tho-masn Sep 19 '21 at 19:41
0

This is not the best way to do it.

You could implement /edit/:name/:age. But what happens if you access the URL /edit/Carl/999?

You should fetch the data, such as name and age, by a unique user id instead: edit/:userid.

tauzN
  • 5,162
  • 2
  • 16
  • 21