将路由器链接标记包含在vuejs中的图像中

Question

我可以在图片代码中包装或附上路由器链接标记吗？

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

Answer 1

轻微更新@reinarg的回答。你也可以使用tag =＆＃34; img＆＃34;路由器链接上的选项如下：

<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

fiddle

Answer 2

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

import { Component } from '@angular/core'; @Component({ template: ` <div class="example"> Example component! </div> ` }) export class ExampleComponent { }

http://jsfiddle.net/vns5vwj9/1/

Answer 3

将点击事件添加到您的img标记中：

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

现在，在您的methods属性中，添加您要在单击图像时触发的methodName回调，例如：

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