說明

今天項目經(jīng)理讓我解決一下elementUI中菜單打開后，再次點擊不會刷新的問題,看了下elementUI組件官網(wǎng)，發(fā)現(xiàn)好像除了一個菜單選中事件，沒啥別的有用的。導致菜單再次點擊不刷新的根本原因是頁面打開后，再次打開相同的頁面是不會刷新的，這應該是框架的機制就是如此。網(wǎng)上又查了下，像這種this.$router.go(0)和location.reload()整個頁面刷新的方式肯定直接pass了。本著認真負責，甘于奉獻的工作態(tài)度，我毅然決然放棄了摸魚的機會，整理了兩個比較不錯的解決方法。

我們先在項目中找到菜單組件的位置，在其組件中定義下菜單選中事件handleSelect

方式一

我們在定義的handleSelect方法中，加入下面一樣代碼：

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

這行代碼是選中菜單后，讓其跳轉到一個不存在的空頁面，等程序走到后面會再次跳回到我們要跳的頁面，如果沒有的話，可以根據(jù)事件參數(shù)跳轉回來：

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

保存代碼后，測試下效果，發(fā)現(xiàn)頁面同一個菜單多次點擊也會刷新頁面了。但是這種方式有個問題，由于它是跳到空頁面再跳回的，所以如果頁面渲染的稍微慢點，我們會可以發(fā)現(xiàn)url上會閃一下，當然這種問題應該沒啥影響。

方式二

在根組件APP.vue中用v-if控制router-view，實現(xiàn)一個刷新方法，具體操作如下：如果你的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 中，可以創(chuàng)建一個全局的事件總線對象，將  App.vue  中的方法注冊到事件總線上，然后在 Element UI 組件中觸發(fā)相應事件，從而調用  App.vue  中的方法。在 main.js （或者其他入口文件）中創(chuàng)建事件總線：

import Vue from 'vue';
// 創(chuàng)建事件總線
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');
 }

結語

無論哪種方式，都能解決我的問題，最終選擇哪種方式都無所謂，方法一最簡單，對于我做的管理后臺來說，用的人少，有些用戶體驗有點瑕疵也沒關系；但是如果使用人數(shù)較多，客戶要求比較高的，可以使用第二種方法。

到此這篇關于解決vue中菜單再次點擊內容不刷新問題的文章就介紹到這了,更多相關vue中菜單再次點擊內容不刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論