Vue路由器：如何将数据传递给链接到的组件？

Posted 2023-02-16

技术标签:

【中文标题】Vue路由器：如何将数据传递给链接到的组件？【英文标题】：Vue Router: How to pass data to component being linked to? 【发布时间】：2021-11-13 16:25:37 【问题描述】：

我正在使用客户端路由并且路由名称是对象的name。我正在链接到 Edit.vue 组件，但如果我想在 Edit 组件中呈现 age，我该如何传入？我知道我可以在路由器参数中访问name，但我也想要该对象中的其他字段，例如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]

然后在我的路由器配置中，我有：

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

【问题讨论】：

【参考方案1】：

这不是最好的方法。

你可以实现/edit/:name/:age。但是如果您访问 URL /edit/Carl/999 会发生什么？

您应该使用唯一的用户 ID 来获取数据，例如姓名和年龄：edit/:userid。

【讨论】：

【参考方案2】：

状态管理是关键字，可能有助于您进一步研究。尤其是 vuex，因为最流行的 Vue 状态管理库在您的情况下可能是有意义的 (https://www.npmjs.com/package/vuex)。那里有大量的教程。

如果您不想使用状态管理库，您可以通过将数据保存在本地存储或 cookie 中来自行实现它的简单版本。或者 - 如果只是关于年龄，您也可以将其添加到查询参数中。

对于类似的问题，也有一个很好描述的 SO 答案：Vue: shared data between different pages

【讨论】：

这并不能以任何方式回答问题。为什么？他有一个父路由，所有数据都可以访问，他想在所有详细信息页面上显示此数据。 Vuex 是这个问题最流行的解决方案。还是我误解了这个问题？