handleSelect(){ this.$router.push('/empty'); }这行代码是选中菜单后,让其跳转到一个不存在的空页面,等程序走到后面会再次跳回到我们要跳的页面,如果没有的话,可以根据事件参数跳转回来:
handleSelect(url,url_arr){ this.$router.push('/empty'); this.$router.push(url); }
保存代码后,测试下效果,发现页面同一个菜单多次点击也会刷新页面了。但是这种方式有个问题,由于它是跳到空页面再跳回的,所以如果页面渲染的稍微慢点,我们会可以发现url上会闪一下,当然这种问题应该没啥影响。
reload(){ this.isRouterAlive=false; this.$nextTick(() => { this.isRouterAlive=true; }) },上面准备好了,剩下的就是handleSelect中如何调用App.vue中的方法了,有两种方式能调用到reload方法:
provide (){ return { reload:this.reload } },然后我们在要调用的地方引入inject:['reload']
handleSelect(){ this.reload(); }
2.使用事件总线(Event Bus):
在 Vue 中,可以创建一个全局的事件总线对象,将 App.vue 中的方法注册到事件总线上,然后在 Element UI 组件中触发相应事件,从而调用 App.vue 中的方法。
在 main.js(或者其他入口文件)中创建事件总线:import Vue from 'vue'; // 创建事件总线 Vue.prototype.$bus = new Vue();在 App.vue 中注册方法到事件总线上:
methods: { reload(){ this.isRouterAlive=false; this.$nextTick(() => { this.isRouterAlive=true; }) }, }, created() { // 堆代码 duidaima.com // 注册方法到事件总线上 this.$bus.$on('app-reload', this.reload); }在handleSelect中调用下,我们点击菜单就可以刷新啦
handleSelect(url,url_arr){ this.$bus.$emit('app-reload'); }