vue-element-admin---点击侧栏重新刷新

255 阅读1分钟

最近在使用 vue-element-admin 开发项目,在进行测试的时候,提出来选中状态下点击侧栏需要进行刷新的功能。

对于VUE来说,点击侧栏如果路由没有发生变化,是不会进行刷新的,那么这个功能应该怎么做呢?

解决思路:使用VUE中的provide,inject,以及通过显示/隐藏(v-if)来刷新窗口。

具体代码示例

第一步:父组件 layout/index.vue 设置 reload 方法

1667900668438.jpg

//下面是需要的代码
 <app-main v-if="isRouterAlivet"/>

  provide(){
      return{
        reload: this.reload
      }
  },
  data(){
   return{
    isRouterAlivet:true
   }
  },
  
  reload(){
      this.isRouterAlivet = false;
      this.$nextTick(()=>{
        this.isRouterAlivet = true;
      })
  }

第二步:子组件( layout/components/Sidebar/index.vue )调用父组件的reload方法

image.png

   <el-menu
        ....
        @select="handleSelect"
   >
   </el-menu>
   inject:['reload'],  // 注意别忘记了这句
   
   handleSelect(index){
     const route = this.$route;
     const { path } = route;
     if(index == path){
         this.reload()
     }
    }

收工。。。。