一文解决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');
 }

结语

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

相关推荐
getaxiosluo几秒前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v3 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫4 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.9 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds2 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store