如何让router-link完全消费父元素的v-on:click点击事件？

Ah, this is a classic event bubbling issue! When you click a <router-link>, the click event propagates up the DOM tree, which is why your parent element's click handler gets triggered too. Here are a couple of straightforward ways to fix this:

1. Use Vue's .stop Event Modifier #

The simplest solution is to add the .stop modifier directly to the <router-link>'s click event. This modifier automatically calls event.stopPropagation() under the hood, stopping the event from bubbling up to parent elements.

<!-- Parent element with click handler -->
<div @click="handleParentClick">
  <!-- router-link with .stop modifier to block bubbling -->
  <router-link to="/target-page" @click.stop>Navigate to Target Page</router-link>
</div>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log("Parent element clicked (this shouldn't fire now!)");
    }
  }
}
</script>

2. Manually Call event.stopPropagation() #

If you need to run custom logic when the <router-link> is clicked before stopping the event bubble, you can explicitly call event.stopPropagation() in your click handler:

<div @click="handleParentClick">
  <router-link to="/target-page" @click="handleLinkClick">Navigate to Target Page</router-link>
</div>

<script>
export default {
  methods: {
    handleLinkClick(event) {
      // Add your custom logic here (e.g., track analytics, validate input)
      console.log("Router link clicked");
      
      // Stop the event from reaching the parent element
      event.stopPropagation();
    },
    handleParentClick() {
      console.log("Parent element clicked (this won't fire anymore!)");
    }
  }
}
</script>

3. Note for Custom Tag router-links #

If you're using the tag prop to render <router-link> as a different element (like a <button> or <div>), the same logic applies—just attach the .stop modifier or manual stopPropagation() call to the element's click event, and it will prevent the parent's click handler from triggering.

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