使用 Vue 对动态组件进行动态路由答案

【问题标题】：Dynamic routing of a dynamics components with Vue使用 Vue 对动态组件进行动态路由
【发布时间】：2022-01-08 15:51:35
【问题描述】：

我正在创建一个应用来管理用户的某些维护。我创建了一个组件，它显示了我输入到对象数组中的所有数据。我的问题是如何将用户重定向到他们单击的每个组件的不同页面（每个页面必须有组件数据）。为了重新定义，我通过了 Vue 语法 $ {maintenance.id} 但没有得到结果。

<card-maintenance
          v-for="manutenzione in manutenzioni"
          :key="manutenzione.id"
          :name="manutenzione.nome"
          :data="manutenzione.data"
          :durata="manutenzione.durata"
        >
        <router-link :to="`manutenzione/${manutenzione.id }`">More details</router-link>
        </card-maintenance>

【问题讨论】：

你的卡片维护组件需要渲染什么吗？为什么路由器链接不在您的卡维护组件中？
尝试在你的卡片维护组件中使用@click prop，就像说的那样
好的，谢谢，将链接移到组件工程中。

标签： javascript vue.js

【解决方案1】：

Vue 误解了 javascript 插值。试试这样：

<card-maintenance
          v-for="manutenzione in manutenzioni"
          :key="manutenzione.id"
          :name="manutenzione.nome"
          :data="manutenzione.data"
          :durata="manutenzione.durata"
        >
        <router-link :to="'manutenzione/' + manutenzione.id ">More details</router-link>
        </card-maintenance>

【讨论】：

【解决方案2】：


<template>
<router-link :to="`/manutenzione/${id}`"> 
  <div class="maitenanceItem">
    
    <div class="nameMaintenace">
      <p>{{ name }}</p>
    </div>
    <div class="dataMaintenance">
      <p>{{ data }}</p>
    </div>
    <div class="durataMaintenace">
      <p>{{ durata }}</p>
    </div>
       
  </div>
  </router-link>
</template>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。