目前采用的方法
思路:在要实现刷新显示的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();