说明
今天项目经理让我解决一下elementUI中菜单打开后,再次点击不会刷新的问题,看了下elementUI组件官网,发现好像除了一个菜单选中事件,没啥别的有用的。导致菜单再次点击不刷新的根本原因是页面打开后,再次打开相同的页面是不会刷新的,这应该是框架的机制就是如此。网上又查了下,像这种this.$router.go(0)和location.reload()整个页面刷新的方式肯定直接pass了。本着认真负责,甘于奉献的工作态度,我毅然决然放弃了摸鱼的机会,整理了两个比较不错的解决方法。
我们先在项目中找到菜单组件的位置,在其组件中定义下菜单选中事件handleSelect
方式一
我们在定义的handleSelect方法中,加入下面一样代码:
javascript
handleSelect(){
this.$router.push('/empty');
}
这行代码是选中菜单后,让其跳转到一个不存在的空页面,等程序走到后面会再次跳回到我们要跳的页面,如果没有的话,可以根据事件参数跳转回来:
javascript
handleSelect(url,url_arr){
this.$router.push('/empty');
this.$router.push(url);
}
保存代码后,测试下效果,发现页面同一个菜单多次点击也会刷新页面了。但是这种方式有个问题,由于它是跳到空页面再跳回的,所以如果页面渲染的稍微慢点,我们会可以发现url上会闪一下,当然这种问题应该没啥影响。
方式二
在根组件APP.vue中用v-if控制router-view,实现一个刷新方法,具体操作如下:
如果你的APP.vue中有reload方法了,你就可以在你要点击菜单刷新的页面调用(调用方法下面说),如果没有,则在App.vue中加入<router-view v-if="isRouterAlive"></router-view>
,data中不要忘记定义isRouterAlive:true
在methods中加入reload方法
ini
reload(){
this.isRouterAlive=false;
this.$nextTick(() => {
this.isRouterAlive=true;
})
},
上面准备好了,剩下的就是handleSelect中如何调用App.vue中的方法了,有两种方式能调用到reload方法:
- 使用provide、inject调用
首先,我们用provide在父组件提供reload方法,使其可供handleSelect使用
kotlin
provide (){
return {
reload:this.reload
}
},
然后我们在要调用的地方引入inject:['reload']
最后就可以直接调用,点击一次菜单刷新一次就OK了。
javascript
handleSelect(){
this.reload();
}
- 使用事件总线(Event Bus):在 Vue 中,可以创建一个全局的事件总线对象,将
App.vue
中的方法注册到事件总线上,然后在 Element UI 组件中触发相应事件,从而调用App.vue
中的方法。
在main.js
(或者其他入口文件)中创建事件总线:
javascript
import Vue from 'vue';
// 创建事件总线
Vue.prototype.$bus = new Vue();
在 App.vue
中注册方法到事件总线上:
javascript
methods: {
reload(){
this.isRouterAlive=false;
this.$nextTick(() => {
this.isRouterAlive=true;
})
},
},
created() {
// 注册方法到事件总线上
this.$bus.$on('app-reload', this.reload);
}
在handleSelect中调用下,我们点击菜单就可以刷新啦
javascript
handleSelect(url,url_arr){
this.$bus.$emit('app-reload');
}
结语
无论哪种方式,都能解决我的问题,最终选择哪种方式都无所谓,方法一最简单,对于我做的管理后台来说,用的人少,有些用户体验有点瑕疵也没关系;但是如果使用人数较多,客户要求比较高的,可以使用第二种方法。