如何通过路由器传递数据？

Question

我在将数据从其余 API 传递到子组件时遇到问题，我有一个包含许多记录的列表，单击 title 后我想打开另一个页面，其中包含此单击元素的详细信息，这是我的代码：

我的路由器在table：

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

我的 user/details 页面：

<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
}

Answer 1

$router 对象向您公开 url

的查询参数

this.$route.query

https://router.vuejs.org/api/#router-link

Answer 2

切换路由时可以在query中传入name，如下：

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

然后在details组件中解析如下：

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

如何通过路由器传递数据？

How to pass data via router?

javascript

vue.js

vue-router