Vue.js VueJS中的条件链接行为

找不到标题的正确名称，如果有人找到更好的名称，我们会很高兴

我有一个代表产品卡的组件。整个组件被包装在

中，这将导致产品页面

然而，我有另一种情况，当我不需要组件来引导产品页面时，而是需要执行一些其他操作

我找到的唯一解决方案是将回调函数作为道具传递，并基于此执行以下操作：

<router-link v-if="!onClickCallback">
    ... here goes the whole component template ...
</router-link>
<div v-if="onClickCallback" @click="onClickCallback">
    ... here again goes the whole component template ...
</div>

... 下面是整个组件模板。。。
... 这里再次出现了整个组件模板。。。

如何在不复制粘贴整个组件的情况下执行此操作？我尝试过这样做（真实代码示例）：

然而，我得到了这样一个消息：

事件“click”的处理程序无效：get null

另外，不确定是否可以通过

阻止

修改器进行单击，这看起来很奇怪，应该有更好的体系结构解决方案

您必须使用

？如果它可以安全地成为

，您可以使用

及

方法：{
handleClick（事件）{
if（this.onclick回调）{
this.onClickCallback（事件）
}否则{
此.$router.push（{name:'clothingItem'，…}）
}
}
}

---

请参见

对错误的注释，您可以在实际代码段中使用空函数而不是null

  <router-link class="clothing-item-card-preview"
           :class="classes"
           :style="previewStyle"
           :to="{ name: 'clothingItem', params: { id: this.clothingItem.id }}"
           v-on="{ click: onClick ? onClick : null }">

这应该有效（替换“路由器链接”的a，然后插入正确的属性） 其他资料：

• v-bind只是一个对象，其中每个键都是组件的一个道具，因此在这里，我根据包装器（路由器链接或简单div）以编程方式定义了一个属性对象。然而，我们不能对事件执行此操作（当然，我们可以创建自己的事件侦听器，但这有点棘手），因此我只需要一个handle方法

newvue({
el:“应用程序”，
数据：{
产品：[{onClickCallback:（）=>{alert（“callback”）；返回true；}}，{}，{}]
},
方法：{
handleClick（产品、事件）{
如果（！product.onClickCallback）返回false
product.onClickCallback（）
返回真值
},
getMyComponentName（产品）{
if（product.onClickCallback）返回“div”
返回“a”
},
getMyComponentProperties（产品）{
if（product.onClickCallback）返回{is:“div”}
返回{
是：“a”，
href:！#”
}
}
}
})

我是回电话的
我是路由器链路

这样，用户无法在新选项卡中打开此产品。这是，这必须是一个链接，这样我就可以在多个目录中打开多个产品tabs@Victor啊，你说得很好，但是另一种情况呢，你需要点击处理程序吗？当我需要点击处理程序时，它是div还是link并不重要：）但为了更加一致，我会到处使用链接是的，但我不能在v-on中使用“.prevent”，我想。。。所以，路由器链路在任何情况下都会起到链路的作用

  <router-link class="clothing-item-card-preview"
           :class="classes"
           :style="previewStyle"
           :to="{ name: 'clothingItem', params: { id: this.clothingItem.id }}"
           v-on="{ click: onClick ? onClick : null }">