使用 vue router-link 将道具作为道具传递给另一个组件答案

【问题标题】：Passing a prop as a prop to another component using vue router-link使用 vue router-link 将道具作为道具传递给另一个组件
【发布时间】：2020-12-21 23:28:53
【问题描述】：

我有一个组件，它接受一个食谱列表并为数组中的每个项目创建一个组件。我正在尝试将配方对象传递给一个组件，然后使用 Router-Link 传递给第二个组件

      <RecipeCard
        v-for="recipe in filteredRecipes"
        :key="recipe.id"
        :recipe="recipe"
      />

RecipeCard 组件内部如下所示：

<template>
  <div>
    <router-link :to="{ path: 'recipe/' + recipe.id, props:{recipe} }">
        <div>{{ recipe.title }}</div>
        <p>
          {{ recipe.description }}
        </p>
    </router-link>
  </div>
</template>

我正在尝试将配方传递给另一个组件，因此当单击配方卡时，它会打开一个详细视图。单击路由器链接后，它会指向此页面：

<template>
  <div>
    <div>{{recipe.id}}</div>
  </div>
</template>

<script>

export default {
  name: 'PageViewRecipe',
    props: {
      recipe: {
        type: Object,
        required: true
      }
    },
  data() {
    return {
    };
  }
};
</script>

<style></style>

配方是一个包含更多细节的对象。

import Vue from "vue";
import Router from "vue-router";
import Home from "./pages/PageHome";
import AddRecipe from "./pages/PageAddRecipe.vue";
import PageViewRecipe from "./pages/PageViewRecipe.vue"

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: 'Home',
      component: Home,
    },
    {
      path: "/add-recipe",
      name: 'AddRecipe',
      component: AddRecipe,
    },
    {
      path: "/recipe/:id",
      name: 'ViewRecipe',
      component: PageViewRecipe,
      props: true
    }
  ],
});

export default router;

不幸的是，我的道具没有传递给最终组件。我尝试使用参数，但似乎没有任何效果。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

vue-router 不会将 props 从 <router-link /> 传递到在 <router-view /> 中呈现的组件。此外，<router-link /> doesn't support props key in to param。它只是被忽略了。

你可以做的是：

使用任何方法进行状态管理 as described in official documentation 这样PageViewRecipe 和RecipeCard 都可以访问相同的配方列表。
在PageViewRecipe 中，将id 作为参数传递给路由器链接。例如

<!-- BTW: you don't have to create path by yourself, let vue-router create it for you by combination of named router and params -->
<router-link :to="{ name: 'ViewRecipe', params: { id: recipe.id } }">
  <div>{{ recipe.title }}</div>
  <p>
    {{ recipe.description }}
  </p>
</router-link>

在您的 PageViewRecipe 中访问来自共享位置（vuex、共享对象等）的食谱列表，并找到具有如下 ID 的食谱：

<template>
  <div>
    <div>{{recipe.id}}</div>
    <p>
      {{ recipe.description }}
    </p>
  </div>
</template>

<script>

export default {
  name: 'PageViewRecipe',
    props: {
      // passed by vue-router (from url), also available as this.$route.params.id
      id: {
        type: Number,
        required: true
      }
    },
    computed: {
       recipe() {
         // `this.recipes` comes from state management (for instance from vuex getter)
         return this.recipes.find(recipe => recipe.id === this.id);
       }
    }
  }
};
</script>

<style></style>

这种方法的好处是您只发出一个 API 请求，并且由于您可以访问完整的配方列表，因此您可以处理一些边缘情况，例如具有给定 ID 的配方不存在时。 但您可以尝试执行两个 API 调用，这样您就不必处理共享状态管理。

【讨论】：