最近在使用 vue-element-admin 开发项目,在进行测试的时候,提出来选中状态下点击侧栏需要进行刷新的功能。
对于VUE来说,点击侧栏如果路由没有发生变化,是不会进行刷新的,那么这个功能应该怎么做呢?
解决思路:使用VUE中的provide,inject,以及通过显示/隐藏(v-if)来刷新窗口。
具体代码示例
第一步:父组件 layout/index.vue 设置 reload 方法
//下面是需要的代码
<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方法
<el-menu
....
@select="handleSelect"
>
</el-menu>
inject:['reload'], // 注意别忘记了这句
handleSelect(index){
const route = this.$route;
const { path } = route;
if(index == path){
this.reload()
}
}
收工。。。。