router.beforeEach触发了两次?
Published on 2023-03-12 15:46 in 分类: 前端 with INEEDSSD
分类: 前端

router.beforeEach触发了两次?

    页面使用来记录打开过的页面,但是当点击关闭,关闭当前页面时,发现beforeEach触发了两次,并且当前页面重新被刷新。

    <router-link v-for="view in visitedViews" :to="view.path" :key="view.path" :class="{active: route.path === view.path}" class="tags-view-item">
    <span v-text="view.meta.title"></span>
    <template v-if="view.path !== '/index'">
    <span v-show="route.path === view.path" class="close-icon">
    <el-icon @click="remove(view)">
    <component :is="'close'"></component>
    </el-icon>
    </span>
    </template>
    </router-link>

    当点击close图标时,remove方法被执行,因为存在事件冒泡,remove方法会先被执行,此时当前页面被关闭,并跳转到最近的一个页面,但是随着事件的冒泡,上层组件的click事件也会被触发,这时候又会重新进入到当前页面,造成点击页面关闭时,不但页面没有被关闭,反而重新加载的情况。

    此时,在onclick中添加stop阻止事件的冒泡,从而解决问题。

    <el-icon @click.stop="remove(view)">
    <component :is="'close'"></component>
    </el-icon>
    posted @   INEEDSSD  阅读(1032)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
    · 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
    · 【译】Visual Studio 中新的强大生产力特性
    · 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
    · 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
    点击右上角即可分享
    微信分享提示