一文解决vue中菜单再次点击内容不刷新问题

说明

今天项目经理让我解决一下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方法:

  1. 使用provide、inject调用
    首先,我们用provide在父组件提供reload方法,使其可供handleSelect使用
kotlin 复制代码
   provide (){
     return {
       reload:this.reload
     }
  },

然后我们在要调用的地方引入inject:['reload']

最后就可以直接调用,点击一次菜单刷新一次就OK了。

javascript 复制代码
 handleSelect(){
      this.reload();
 }
  1. 使用事件总线(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');
 }

结语

无论哪种方式,都能解决我的问题,最终选择哪种方式都无所谓,方法一最简单,对于我做的管理后台来说,用的人少,有些用户体验有点瑕疵也没关系;但是如果使用人数较多,客户要求比较高的,可以使用第二种方法。

相关推荐
可缺不可滥4 分钟前
前端 性能优化 (图片与样式篇)
前端·性能优化
Bug从此不上门6 分钟前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图20934 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉39 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か2 小时前
打字机效果显示
前端·vue3·antv
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试