【Vue技巧】vue 阻止a链接跳转事件的两种方法

ChatGPT4.0国内站点，支持设计稿转代码：https://www.atalk-ai.com/

在Vue中，如果你想阻止<a>链接的默认跳转事件，你可以使用@click.prevent或者@click配合.prevent修饰符。这样做可以阻止链接的默认行为，即不会跳转到href属性指定的URL。下面是两种实现方式：

1、使用.prevent修饰符：

<template>
  <a href="http://example.com" @click.prevent="handleClick">
    Click me
  </a>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // 在这里处理你的点击事件，链接不会跳转
      console.log('Link clicked!');
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、使用event.preventDefault()：

<template>
  <a href="http://example.com" @click="handleClick">
    Click me
  </a>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // 明确调用 preventDefault 来阻止默认行为
      event.preventDefault();
      // 在这里处理你的点击事件，链接不会跳转
      console.log('Link clicked!');
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这两种情况下，当用户点击链接时，handleClick方法会被调用，但是浏览器不会导航到href属性指定的URL。你可以在handleClick方法中添加任何其他的逻辑，例如触发某个事件、调用API等。