Tag in router-link can't register dragenter event listener correctly.

[oraant]

Version

3.0.6

Reproduction link

https://jsfiddle.net/oraant/295s4pob/

Steps to reproduce

HTML:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <p draggable="true" @dragstart.self="drag">Drag Me!!!</p>
  
  <a @drop.self="drop" @dragover.self="dragover">✔️ can register listener correctly</a>
  <router-link tag="div" event="" :to="'www.baidu.com'">
    <a @drop.self="drop" @dragover.self="dragover">❌ can NOT register listener correctly<br></a>  <!-- LOOK AT HERE!!!!!!!!!!! -->
    <a @drop.self.native="drop" @dragover.self.native="dragover">❌ can NOT register listener correctly<br></a>
    <a @drop.native.self="drop" @dragover.native.self="dragover">❌ can NOT register listener correctly<br></a>

    <router-link :to="''" @drop.self="drop" @dragover.self="dragover">❌ can NOT register listener correctly<br></router-link>
    <router-link :to="''" @drop.self.native="drop" @dragover.self.native="dragover">✔️ can register listener correctly<br></router-link>
    <router-link :to="''" @drop.native.self="drop" @dragover.native.self="dragover">✔️ can register listener correctly<br></router-link>
  </router-link>
  
  <p>Drop Count: <b>{{ count }}</b></p>
</div>

JS:

const router = new VueRouter()

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    count: 0,
  },
  methods: {
    drag: function(ev){
      console.log('ev.target.id');
    },
    drop: function(ev){
      ev.preventDefault();
      this.count  = 1;
    },
    dragover: function(ev){
      ev.preventDefault();
    },
  },
  router,
})

What is expected?

hope the <a> tag in <router-link> can register listener correctly, without modifying it to <router-link>.

What is actually happening?

it on the steps.

[posva]

I took a look and the only one not working is the a inside the router-link. Keep in mind, you can only nest one a, and definitely not nest router-link between each other, unless you use the v-slot api

Some important notes:

• don't use .native with elements like a
• always use .native with components like router-link

Using the v-slot api will temporarily solve your issue:

<router-link v-slot="{ navigate, href }" :to="'/'">
  <div>
    <a @click.prevent="navigate" :href="href" @drop.self="drop" @dragover.self="dragover">works</a>
  </div>
</router-link>

Events are not kept on the a I will fix it and release a patch