如何在Vuetify 2的carousel item上添加href属性？

Vuetify 2 的 v-carousel-item 本身没有内置跳转属性，你可以通过以下两种方式实现点击轮播项跳转至不同网站的需求：

方法一：绑定点击事件处理跳转 #

给每个v-carousel-item添加@click事件，可直接在事件中指定跳转地址，或调用统一方法传递地址参数（适合需要额外逻辑的场景）。

代码示例 #

<v-carousel>
  <!-- 直接在点击事件中跳转当前窗口 -->
  <v-carousel-item
    src="https://th.bing.com/th/id/R.1f617f6c0e62cf22f8cc0db2d56c9b28?rik=%2fsedPErWt7A%2bIA&riu=http%3a%2f%2f2.bp.blogspot.com%2f-rhsJGYj0RFc%2fUJ8G5i3UEHI%2fAAAAAAAAABg%2fQY0NlUG7lBI%2fs1600%2fwallpaper-praia-wallpapers%2b(13).jpg&ehk=AkwUJUusgP9ImnYhvxvSQ0PSTFbjvJlKlUSeikKT%2bAQ%3d&risl=&pid=ImgRaw&r=0"
    cover
    @click="window.location.href='https://example.com/site1'"
  ></v-carousel-item>

  <!-- 调用自定义方法传递地址，可添加额外逻辑 -->
  <v-carousel-item 
    src="https://th.bing.com/th/id/R.5fedcc584b436fe320057461d49f3996?rik=0iHP4CUZiAaMyQ&pid=ImgRaw&r=0" 
    cover
    @click="handleCarouselClick('https://example.com/site2')"
  ></v-carousel-item>

  <!-- 新窗口打开目标网站 -->
  <v-carousel-item 
    src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
    cover
    @click="window.open('https://example.com/site3', '_blank')"
  ></v-carousel-item>
</v-carousel>

对应Vue方法（若使用自定义逻辑） #

methods: {
  handleCarouselClick(url) {
    // 可在此添加点击统计等额外逻辑
    window.location.href = url;
    // 如需新窗口打开，替换为：window.open(url, '_blank');
  }
}

方法二：用<a>标签包裹轮播项 #

将每个v-carousel-item放在原生<a>标签内，直接设置href和target属性，贴近原生HTML跳转逻辑。

代码示例 #

<v-carousel>
  <a href="https://example.com/site1" target="_self">
    <v-carousel-item
      src="https://th.bing.com/th/id/R.1f617f6c0e62cf22f8cc0db2d56c9b28?rik=%2fsedPErWt7A%2bIA&riu=http%3a%2f%2f2.bp.blogspot.com%2f-rhsJGYj0RFc%2fUJ8G5i3UEHI%2fAAAAAAAAABg%2fQY0NlUG7lBI%2fs1600%2fwallpaper-praia-wallpapers%2b(13).jpg&ehk=AkwUJUusgP9ImnYhvxvSQ0PSTFbjvJlKlUSeikKT%2bAQ%3d&risl=&pid=ImgRaw&r=0"
      cover
    ></v-carousel-item>
  </a>

  <a href="https://example.com/site2" target="_blank">
    <v-carousel-item 
      src="https://th.bing.com/th/id/R.5fedcc584b436fe320057461d49f3996?rik=0iHP4CUZiAaMyQ&pid=ImgRaw&r=0" 
      cover
    ></v-carousel-item>
  </a>

  <a href="https://example.com/site3" target="_self">
    <v-carousel-item 
      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
      cover
    ></v-carousel-item>
  </a>
</v-carousel>

注意事项 #

• target="_self" 为当前窗口跳转，target="_blank" 为新窗口打开，可根据需求选择；
• 若需在跳转前执行额外逻辑（如数据统计），优先选择绑定点击事件的方式；
• 使用<a>标签包裹时，Vuetify轮播项的默认样式不会受影响，无需额外调整。

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