title: How to extend the onClick handler behaviour for a `router-link` in vue3 router
body: <p>I have a <code>&lt;router-link /&gt;</code> that I want to use to navigate to another page in a Vue 3 application, but I also want to run another function when this link is clicked.</p>
  <p>Right now I have to use an extra <code>&lt;span /&gt;</code> element to wrap the <code>&lt;router-link /&gt;</code> and add the <code>@click</code> attribute there to rely on event bubbling. Adding the <code>@click</code> handler on <code>&lt;router-link /&gt;</code> causes the router link not to work and the browser thinks it is just a normal anchor href.</p>
  <pre><code>    &lt;span @click=&quot;handleClose(imageId)&quot;&gt;
        &lt;router-link
          :to=&quot;{name: 'image', params: {'imageId': imageId}}&quot;
          class=&quot;permalink&quot;&gt;
          Permalink
        &lt;/router-link&gt;
      &lt;/span&gt;
  </code></pre>
  <p>Is there a better way?</p>