解决element-ui点击菜单项(el-menu)不能重复刷新的问题

225 阅读1分钟

目前采用的方法

思路:在要实现刷新显示的dom上添加v-if控制router-view

1.添加v-if判断

<template>
    <router-view v-if='isRouterAlive'></router-view>
</template>

2.methods方法中添加reload方法

data(){
  return {
    isRouterAlive:true;
  }
}
reload(){
   this.isRouterAlive=false;
   this.$nextTick(()=>{
     this.isRouterAlive=true;
   })
}
created() {
   this.$eventBus.$on("reload-page", this.reload);
},
beforeDestroy() {
   this.$eventBus.$off("reload-page", this.reload); // 清理事件监听,防止内存泄漏
}

3.在el-menu中添加@select="handleSelect"方法

methods: {
    handleSelect(index) {
      if (index === this.$route.path) {
        //解决菜单栏不能重复点击的问题
        this.$eventBus.$emit("reload-page");
      }
    },
  }

ps:在main.js中传值挂载中间件

import Vue from "vue";
Vue.prototype.$eventBus = new Vue();