說(shuō)明

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

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

方式一

我們?cè)诙x的handleSelect方法中，加入下面一樣代碼：

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

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

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

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

方式二

在根組件APP.vue中用v-if控制router-view，實(shí)現(xiàn)一個(gè)刷新方法，具體操作如下：如果你的APP.vue中有reload方法了，你就可以在你要點(diǎn)擊菜單刷新的頁(yè)面調(diào)用（調(diào)用方法下面說(shuō)），如果沒(méi)有，則在App.vue中加入 <router-view v-if="isRouterAlive"></router-view> ，data中不要忘記定義 isRouterAlive:true

在methods中加入reload方法

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

上面準(zhǔn)備好了，剩下的就是handleSelect中如何調(diào)用App.vue中的方法了，有兩種方式能調(diào)用到reload方法：

1. 使用provide、inject調(diào)用首先，我們用provide在父組件提供reload方法，使其可供handleSelect使用

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

然后我們?cè)谝{(diào)用的地方引入inject:['reload']

最后就可以直接調(diào)用，點(diǎn)擊一次菜單刷新一次就OK了。

 handleSelect(){
      this.reload();
 }

1. 使用事件總線（Event Bus）：在 Vue 中，可以創(chuàng)建一個(gè)全局的事件總線對(duì)象，將  App.vue  中的方法注冊(cè)到事件總線上，然后在 Element UI 組件中觸發(fā)相應(yīng)事件，從而調(diào)用  App.vue  中的方法。在 main.js （或者其他入口文件）中創(chuàng)建事件總線：

import Vue from 'vue';
// 創(chuàng)建事件總線
Vue.prototype.$bus = new Vue();

在 App.vue 中注冊(cè)方法到事件總線上：

methods: {
 reload(){
        this.isRouterAlive=false;
        this.$nextTick(() => {
          this.isRouterAlive=true;
        })
 },
},
created() {
  // 注冊(cè)方法到事件總線上
  this.$bus.$on('app-reload', this.reload);
}

在handleSelect中調(diào)用下，我們點(diǎn)擊菜單就可以刷新啦

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

結(jié)語(yǔ)

無(wú)論哪種方式，都能解決我的問(wèn)題，最終選擇哪種方式都無(wú)所謂，方法一最簡(jiǎn)單，對(duì)于我做的管理后臺(tái)來(lái)說(shuō)，用的人少，有些用戶體驗(yàn)有點(diǎn)瑕疵也沒(méi)關(guān)系；但是如果使用人數(shù)較多，客戶要求比較高的，可以使用第二種方法。

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

最新評(píng)論