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 @ 2023-03-12 15:46  INEEDSSD  阅读(635)  评论(0编辑  收藏  举报