VUE JS Prevent event propagation for router link

Question

I have the following structure...

<template>
    <li class="nav-item" style="z-index:9">
        <router-link
                :to="link.path"
                @click.native="linkClick"
                class="nav-link"
                :target="link.target"
                :href="link.path"                >
            <template >
                <i :class="link.icon"></i>
                <div>                
                  <div class="navLink" style="border:2px solid green; z-index:9; float: left;">                
                    <span class="nav-link-text">{{ link.name }}</span>
                    <br>
                    <span style="font-size:12px" class="nav-link-text">{{ link.desc }}</span>
                  </div>

                  <div  v-on:click.once="downloadDicom(link)" class="iconClick"  style=" float:right;"> <i  style="margin-top: 25px" class="fas fa-download"> </i> 
                  </div>
              </div>                               
            </template>
         </router-link>
    </li>
</template>

What I want to achieve is that only the downloadDicom function is triggered when I click on the link however the router link is also called.

I have tried all kind of event stopping but it never worked.

downloadDicom() {             
    event.stopImmediatePropagation();
    event.stopPropagation();
},

Answer 1

The router-link's default slot can customize the template of the rendered link. You can specify your own anchor tag with an @click event handler, and apply the .stop.prevent event modifiers:

<router-link to="/about">
  <a @click.stop.prevent="downloadDicom">About</a>
</router-link>

demo