Router link reloads the app when @click handler is added

[livthomas]

Version

4.0.5

Reproduction link

https://codesandbox.io/s/magical-maxwell-9ssoy?file=/src/App.vue

Steps to reproduce

See where @click event handler has been added to <router-link> and try to click on that link.

What is expected?

Vue Router should take you to a given page without a full application reload.

What is actually happening?

The whole application is reloaded as if it was a regular HTML link.

---

Based on specific values of component props, we sometimes need to both prevent the default router link action and execute a custom logic instead. This bug makes it impossible to do that.

[posva]

If you add a click to router link, it will override the internal one. This is rather an intentional change for flexibility. You can still use the v-slot API to add multiple click listeners.

We could instead combine the routerlink onClick listener with any attrs.onClick listener passed by the user (and that would be an easy fix). In that case I think that the order (which matters) should be attrs.onClick and then router-link's onClick but it still worth some investigation

[livthomas]

Thanks @posva! I have finally been able to implement what I wanted with custom router link:

    <router-link :to="{name: routeName}" :custom="true" v-slot="{href, navigate}">
      <a :href="href" @click="onLinkClick($event, navigate)">
        {{ text }}
      </a>
    </router-link>

I tried this approach before. I just forgot to pass event to navigate function as a parameter:

  setup(props, context) {
    const {myCondition} = toRefs(props);

    const onLinkClick = (event: MouseEvent, navigate: (event: MouseEvent) => void) => {
      if (myCondition.value) {
        event.preventDefault();
      } else {
        navigate(event);
      }
      context.emit('link-click');
    };

    return {onLinkClick};
  },

But it would still be nice if it was possible to simply add @click handler directly to <router-link>.

[ethansnow2012]

@livthomas Thanks for the implement. This is my wrapped version. Hope it help someone.

<script setup lang="ts">
    import { RouterLink } from 'vue-router'
    
    const emit = defineEmits(["click"]);
    const props = defineProps<{to:any}>(); // sorry, not efficient in typescript
    
    const handlerClick = ($ev: MouseEvent)=>{
        emit('click', $ev)
    }
    const onLinkClick = (event: MouseEvent, navigate: (event: MouseEvent) => void) => {
        navigate(event);// vou router goto
        event.preventDefault()
        event.stopImmediatePropagation()
        
    };

</script>
    
<template>
    <RouterLink :to="props.to" :custom="true" v-slot="{ href, navigate }"
        @click="handlerClick">
        <a :href="href" @click="($ev) => { handlerClick($ev); onLinkClick($ev, navigate) }">
            <slot ></slot>
        </a>        
    </RouterLink>
</template>

[dam1r89]

If I understand correctly, there is no need for v-slot workaround since now it will call the @click handler before navigating to the next page.

So the solution is just to remove .native in vue3