Question

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

我在表中的路由器：

<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

您可以在切换路由时通过 name 中的 query 如下：

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

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

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

Answer 2

$router 对象将您暴露给 url 的查询参数

this.$route.query

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

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

2 个答案: