VueJS 2.0+Swiper v8.3.2中锚点标签跳转失效问题求助

Swiper默认会拦截Slide内部元素的点击事件，导致<a>标签的跳转行为失效，以下是三种可行的解决方法：

方法一：修改Swiper初始化配置 #

在初始化Swiper时，禁用事件拦截相关配置，让锚点的默认跳转行为正常触发：

mounted() {
  new Swiper('.swiper-container', {
    // 你的其他Swiper配置项
    preventClicks: false,       // 关闭阻止点击非Swiper元素的行为
    preventClicksPropagation: false  // 关闭阻止事件冒泡的行为
  })
}

方法二：给锚点添加事件修饰符 #

通过Vue的@click.stop修饰符阻止事件冒泡到Swiper父元素，避免被拦截：

<template>
  <a
    :href="url"
    :title="title"
    target="_blank"
    @click.stop
  >{{ title }}</a>
</template>

方法三：手动触发跳转逻辑 #

完全绕过Swiper的事件拦截，通过JavaScript手动控制页面跳转：

<template>
  <a
    :title="title"
    @click="handleJump"
  >{{ title }}</a>
</template>

<script>
export default {
  props: ['url', 'title'],
  methods: {
    handleJump() {
      // 按需选择跳转方式
      window.open(this.url, '_blank') // 新窗口打开
      // window.location.href = this.url // 当前窗口跳转
    }
  }
}
</script>

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