VUE JS 防止路由器链接的事件传播答案

【问题标题】：VUE JS Prevent event propagation for router linkVUE JS 防止路由器链接的事件传播
【发布时间】：2020-12-21 08:34:44
【问题描述】：

我有以下结构...

<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>

我想要实现的是，当我点击链接时，只触发了downloadDicom功能，但也调用了路由器链接。

我尝试了所有类型的事件停止，但都没有成功。

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

【问题讨论】：

你试过v-on:click.stop或v-on:click.self吗？
是一样的结果

标签： javascript vue.js events

【解决方案1】：

router-link的default slot可以自定义渲染链接的模板。您可以使用@click 事件处理程序指定您自己的锚标记，并应用.stop.prevent 事件修饰符：

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

demo

【讨论】：