点击轮播图实现不一样的跳转操作，其中有一张图片跳转到这个apk下载，另一张图片跳转到本地路由

最新推荐文章于 2025-08-08 18:14:18 发布

原创最新推荐文章于 2025-08-08 18:14:18 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了如何在前端轮播图中处理apk资源，当用户点击某张图片时，实现apk下载，而点击另一张图片则跳转到本地路由。在处理apk下载时，避免直接访问导致的乱码问题，探讨了解析和下载apk的正确方法。通过js，可以实现点击图片触发文件下载，并确保下载过程不出现不必要的页面跳转。

需求：轮播图从接口v-for循环获取数据，其中有一张图片跳转到这个apk下载，另一张图片跳转到本地路由
在这里插入图片描述

<cube-slide-item v-for="(item, index) in items"
                       :key="index">
  <!-- :href="item.src" -->
  <!-- 跳转资源包 -->
  <a :href="item.resourceId" v-if = "item.resourceType == 4"
           class="main-bak-height">
    <img class="swipe-img"
         :src="'http://10.191.1.1' + item.src">
  </a>
  <!-- 跳转注册 -->
  <a @click = "router" v-else-if = "item.resourceType == 3"
     class="main-bak-height">
    <img class="swipe-img"
         :src="'http://10.191.1.1' + item.src">
  </a>
  <!-- 大图查看 -->
  <a :href="'http://10.191.1.1'+item.src"  v-else
     class="main-bak-height"
     :style="{'background': 'url('+item.src+') no-repeat', 'background-size': '100% 100%', 'background-position': 'center center' }">
    <img class="swipe-img"
         :src="'http://10.191.1.1' + item.src">
  </a>
</cube-slide-item>