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

说明

今天项目经理让我解决一下elementUI中菜单打开后，再次点击不会刷新的问题,看了下elementUI组件官网，发现好像除了一个菜单选中事件，没啥别的有用的。导致菜单再次点击不刷新的根本原因是页面打开后，再次打开相同的页面是不会刷新的，这应该是框架的机制就是如此。网上又查了下，像这种this.$router.go(0)和location.reload()整个页面刷新的方式肯定直接pass了。本着认真负责，甘于奉献的工作态度，我毅然决然放弃了摸鱼的机会，整理了两个比较不错的解决方法。

我们先在项目中找到菜单组件的位置，在其组件中定义下菜单选中事件handleSelect

方式一

我们在定义的handleSelect方法中，加入下面一样代码：

 handleSelect(){
      this.$router.push('/empty');
 }

这行代码是选中菜单后，让其跳转到一个不存在的空页面，等程序走到后面会再次跳回到我们要跳的页面，如果没有的话，可以根据事件参数跳转回来：

 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方法

 reload(){
        this.isRouterAlive=false;
        this.$nextTick(() => {
          this.isRouterAlive=true;
        })
 },

上面准备好了，剩下的就是handleSelect中如何调用App.vue中的方法了，有两种方式能调用到reload方法：

1. 使用provide、inject调用首先，我们用provide在父组件提供reload方法，使其可供handleSelect使用

   provide (){
     return {
       reload:this.reload
     }
  },

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

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

 handleSelect(){
      this.reload();
 }

1. 使用事件总线（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() {
  // 注册方法到事件总线上
  this.$bus.$on('app-reload', this.reload);
}

在handleSelect中调用下，我们点击菜单就可以刷新啦

 handleSelect(url,url_arr){
   this.$bus.$emit('app-reload');
 }

结语

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

到此这篇关于解决vue中菜单再次点击内容不刷新问题的文章就介绍到这了,更多相关vue中菜单再次点击内容不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论