NuxtJS 2+Vuetify环境下v-app-bar内v-img添加跳转链接的实现方法

你可以直接将<v-img>组件包裹在跳转标签内，插槽返回的props正常绑定即可，以下是两种常用场景的实现代码：

1. 内部路由跳转（使用NuxtLink） #

适用于跳转到项目内的其他页面，比如首页：

<template>
  <v-app>
    <v-app-bar app>
      <template v-slot:img="{ props }">
        <!-- 替换to属性为你的目标路由 -->
        <NuxtLink to="/" class="d-flex h-100 align-center">
          <v-img v-bind="props" :src="logoUrl" class="pa-4" contain></v-img>
        </NuxtLink>
      </template>
    </v-app-bar>
  </v-app>
</template>

给NuxtLink添加的弹性布局类可以保证图片在原有区域内正常居中，避免布局错乱。

2. 外部链接跳转（使用a标签） #

适用于跳转到站外地址：

<template>
  <v-app>
    <v-app-bar app>
      <template v-slot:img="{ props }">
        <!-- 替换href属性为你的目标外部地址，不需要新窗口打开可删掉target和rel属性 -->
        <a href="https://示例外部地址.com" target="_blank" rel="noopener noreferrer" class="d-flex h-100 align-center">
          <v-img v-bind="props" :src="logoUrl" class="pa-4" contain></v-img>
        </a>
      </template>
    </v-app-bar>
  </v-app>
</template>

如果遇到点击无响应的情况，可以给跳转标签添加style="pointer-events: auto"属性，避免上层组件拦截点击事件。

内容的提问来源于stack exchange，提问作者baer999