时间戳

首页 > 解决方案 > 使用 vue-router 在组件之间传递数据

vue.js - 使用 vue-router 在组件之间传递数据

问题描述

有很多问题的标题与我的类似，但这就是我的问题所在。让我们举一个非常常见的案例，我正在构建一本食谱书。我正在遍历我的食谱并创建指向该Recipe.vue组件的链接：

<router-link v-for="recipe in recipes" :to="{path: `/recipe/${recipe.title}`">
     <a>{{recipe.id}}</a>
</router-link>

现在据我了解，解决方案很少：1.设置props:true并传递道具： <router-link v-for="recipe in recipes" :to="{name: 'Recipe', params: {recipe}}"> <a>{{recipe.title}}</a> </router-link>

  1. 设置Recipe为子组件并将数据作为 regur parent=>child 数据传输传递

  2. Recipe使用 Vuex 和状态管理然后从组件中的存储中“撤回”数据

  3. 将 id 传递给Recipe组件，然后在其mounted()执行 http 请求时获取特定项目的数据。

我发现很难理解这里的最佳实践以及我应该为我的生产环境选择什么。

我内心的声音说 3 号 - 状态管理是多余的，而 4 号是不必要的 api 调用，因为我已经有了我需要的数据。

关于我应该在以下基本情况下使用哪种方法的任何建议：第一个组件是一个食谱列表，然后从它导航到一个仅用于显示食谱数据的组件？

标签： vue.js

解决方案

推荐阅读