RouterLink click.native handler stops being called after page rerender

[youngpirate32]

Version

2.7.10

Reproduction link

codesandbox.io

Steps to reproduce

1. Click link "Go about"
2. See in console "on click"
3. Click link "Go home"
4. Click link "Go about"

What is expected?

The console will "on click" twice

What is actually happening?

In the console "on click" 1 time

[youngpirate32]

If load page async (https://codesandbox.io/s/angry-sun-y90on7?file=/src/main.js), then handler is never called

[nieyuyao]

You can use span as slot for router-link and bind click handler to it.

[yyx990803]

Are you only able to reproduce this with RouterLink and not any other component?

[youngpirate32]

Only RouterLink

[seriouslysean]

For what it's worth, I put together a reproduction in the Nuxt issue here, https://github.com/nuxt/nuxt/issues/10593#issuecomment-1399109931.

I also went through the changes and confirmed this was working as intended on Vue 2.6.14 with both Vue Router versions (3.5.1 and 3.6.5) , then broken in Vue 2.7.14 with both versions so I don't think this is tied to a Vue Router change.

That said, there is documentation on the proper way to utilize a router-link that does fix the issue, see https://v3.router.vuejs.org/api/#v-slot-api-3-1-0.

Taking your example, @youngpirate32, here's a working version with the slot approach, https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-hzr4u4?file=/src/views/AboutView.vue. This also fixes the async version, https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-async-mqb3o3?file=/src/views/HomeView.vue.

@yyx990803 though this does fix the issue, I'm still curious why the order of operation of click events previously supported @click natively on the router-link, and now no longer does. I wouldn't be surprised if this was just a case of optimization.

All that to say that there is a valid, documented approach here that works to fix the issue, so this may not be a bug at all. Hope this helps!

[1001v]

Hello. Is there any chance for it to be fixed? This is a huge regression actually, and the suggested workaround is not always suitable. Thank you.

[manhdinh141]

Vue.directive('click', {
  bind (el, binding) {
    el.addEventListener('click', binding.value)
  },
  unbind (el, binding) {
    el.removeEventListener('click', binding.value)
  }
})

nuxt-link(:to="..." v-click="doAnyThing")