router.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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义