javascript - How to pass data via router?

Question

I have a problem with passing data from my rest API to the child component, I have a list with many records, after a click on title i want to open another page with details of this clicked element, here is my code:

My router in table:

<router-link
  to="/user/details"
  v-slot="{ href, route, navigate }"
>
  <a
    :href="href"
    @click="navigate"
  >
    {{ user.name }}
  </a>
</router-link>

My user/details page:

<template>
  <div>
    <div class="flex flex-wrap">
      <div class="w-full mb-12 xl:mb-0 px-4">
           //HOW TO USE THIS MY user.name FROM ROUTER?
      </div>
    </div>
  </div>
</template>
<script>
export default {
    components: {}
};
</script>

{
  path: "/user/details",
  component: UserDetails
}

question from:https://stackoverflow.com/questions/65891992/how-to-pass-data-via-router

Answer 1

You can pass the name in the query when switching routes as follows:

<router-link 
  :to="{ path: '/user/details', query: { name: user.name } }"
>
  User Details
</router-link>

And then parse it in the details component as follows:

data: () => ({ userName: "" }),
created() {
  this.userName = this.$route.query.name;
}