Vue.js 如何为除某些部件外的组件设置路由器链接

我已经使用VueJS和tailwind创建了一张卡。卡片上有一些按钮，如编辑和删除。我想在这个卡片组件上添加一个路由器链接，这样当用户点击卡片时，它就会打开，但是编辑和删除按钮不再工作，点击它们也会重定向页面。 我怎样才能解决这个问题

这是我的密码：

<router-link to="somewhere">
    <card-component :data="products"></card-component>
</router-link>

卡组件：

<div :key="id" v-for="(row, id) in data">
    <div>
        <img alt="Product Image"
             v-lazy="row.img_url"
             class="vs-images-hover-zoom rounded-lg p-0 h-24 w-32 object-center object-cover"/>
    </div>
    <div>
        <p class="product-name font-medium">{{ row.name }}</p>
    </div>
    <div class="whitespace-no-wrap">
        <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" @click="editPopup = true"/>
        <feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger stroke-current" class="ml-2" @click="deletePopup = true"/>
    </div>
</div>

{{row.name}

似乎您遇到了问题，因为按钮的点击被路由器链接捕获。您可以执行以下操作之一：

在卡组件内的按钮中使用

@click.stop

（它将停止事件传播）

例如，不要使用

路由器链接

包装整个卡片，并将其仅放在图像和标题元素上

不要使用

router链接

，使用

this.$router，在卡的右侧区域获得@click事件。按

来处理它

---

似乎您遇到了问题，因为按钮的点击被路由器链接捕获。您可以执行以下操作之一：

在卡组件内的按钮中使用

@click.stop

（它将停止事件传播）

例如，不要使用

路由器链接

包装整个卡片，并将其仅放在图像和标题元素上

不要使用

router链接

，使用

this.$router，在卡的右侧区域获得@click事件。按

来处理它

---

如果您希望EditIcon和TrashIcon成为链接，则需要将它们包装在两个单独的路由器链接中。路由器链路包装卡组件的目的是什么？它应该去哪里？@LannyBose它应该去它的产品的查看页面，我想用户更容易点击卡片上的某个地方打开查看页面，而不是点击一个小按钮。所以你最初的想法（点击卡片会显示，但点击卡片上的编辑会编辑）是可行的。你只是在你的卡组件中没有任何路由器链接可编辑…？你说那些按钮“不再工作”，但那里没有链接。它们有用吗？@LannyBose有@点击这些按钮，但点击它们，只会将页面重定向到产品视图。如果您希望EditIcon和TrashIcon成为链接，则需要将它们包装在两个单独的路由器链接中。路由器链路包装卡组件的目的是什么？它应该去哪里？@LannyBose它应该去它的产品的查看页面，我想用户更容易点击卡片上的某个地方打开查看页面，而不是点击一个小按钮。所以你最初的想法（点击卡片会显示，但点击卡片上的编辑会编辑）是可行的。你只是在你的卡组件中没有任何路由器链接可编辑…？你说那些按钮“不再工作”，但那里没有链接。它们有用吗？@LannyBose有@点击这些按钮，但点击它们，只会将页面重定向到产品视图。我真的想保留这个概念，我尝试了

@click。停止
，但没有改变。我真的想保留这个概念，我尝试了
@click。停止
，但没有改变。