一文解决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方法：

使用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');
 }

结语

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