在 vuejs 中的图像中包含 router-link 标记答案

【问题标题】：Enclosing a router-link tag in an image in vuejs在 vuejs 中的图像中包含 router-link 标记
【发布时间】：2018-02-08 07:02:37
【问题描述】：

我可以在图像标签中包装或包含路由器链接标签吗？

当我点击图片时，我希望它引导我到所需的页面。

【问题讨论】：

【解决方案1】：

为您的img 标签添加点击事件：

<img @click="methodName" src="image.jpg" alt="...">

现在在您的方法属性中添加您想要在单击图像时触发的方法名称回调，例如：

methods: {
  methodName() {
    return this.$router.push('desired-page-path');
  }
};

【讨论】：

【解决方案2】：

@reinarg 的回答略有更新。您还可以像这样在路由器链接上使用 tag="img" 选项：

<router-link to="/" tag="img" src="https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg"></router-link>

router-link 将呈现为 img

【讨论】：

请记住：tag 属性将在 Vue Router 4 中被删除：next.router.vuejs.org/guide/migration/…，因此应首选接受的答案。

【解决方案3】：

是的，你可以，但反过来：你需要用 router-link 标签包装你的图像

<router-link to="/"><img src="path.jpg"/></router-link>

【讨论】：

好东西，@reinarg。比@retrograde 的update 更好，它允许更普遍的使用。我将它与svg 标记内的svg 组件（polygon）一起使用，它仍然像魅力一样工作。所以我不需要生成独立的svg 文件并将它们加载到每个router-link 上。它直接嵌入到svg 内联。谢谢！