vue項目中踩過的element的坑

前言：在現在這種大的社會背景下，人們的需求更加的個性化了，而之前為了解放開發復雜的原生開發狀態，現有的組件庫已經遠遠不能滿足人們高質量的需求了，這兩天開發發現了一些element UI交互上的缺陷，當然也是一些容易大意疏忽的細節問題，希望能給大家帶來幫助

1.element Message 消息提示

1.項目中Message組件的引用

//全部引入組件庫使用方便
import ElementUI from "element-ui";
//按需引入，這種好處就是代碼體積小
import { Message } from "element-ui";

//全局掛載，便捷的this引用
Vue.prototype.$message = Message;

2.Message組件的問題

頁面運行時代碼報錯：

element組件源碼報錯位置

3.這里大家大概也能看出問題的所在了

點擊查看自己代碼報錯位置，基本就可以看出報錯原因

基本總結研究總結：Message組件在使用的過程中調用的入參不能為 null 和 undefined

一般發生這種問題的位置原因：大概可以多注意一下axios或者fetch請求的返回結果的地方引用處，如果有Message組件異常提示設置，但是后端返回的數據里面缺少字段，則就會產生 “undefined” 的上面的報錯。

2.element NavMenu 導航菜單

a.官方代碼邏輯：

<el-menu :default-active="baseroute" class="vertical" @select="menuclick" :router="menurouter">

   <el-menu-item :index="items.router" v-for="items in menu" :key="items.id">
     <span slot="title">{{items.label}}</span>
   </el-menu-item>
</el-menu>

b.官方的API：

看着這個組件沒有問題很完美，使用也很順暢，但是問題出就出在:router="true"這個配置上，大家有沒有發現這個配置項無法傳參，

c.當然遇到問題我們就需要研究解決：（初步的解決方案）

watch: {
 "$route.path": function(newVal) {
    //menu就是展示菜單的數組
    this.menu.forEach(item=>{
      if(newVal==item.router){
         this.$router.push({path:newVal ,query:{...this.routermsg}})
      }
    })
  },
},

d.又有問題出現了，那就時當你點擊當前高亮菜單時（一個菜單點兩次），watch是監聽不到的（認為路由是沒有變化的），組件會以 router 定義的 index 作為 path 進行路由跳轉，也就是沒有了路由傳參的功能，頁面就會各種報錯和參數錯誤

e.在此情形下后面改善代碼兼容了 NavMenu 導航菜單傳參的功能,

<script>
methods: {
   menuclick(index,indexPath){
     this.baseroute=index
     this.$router.push({path:indexPath[0] ,query:{...this.routermsg}})
   }
}
</script>

兼容了傳參功能，那么watch監聽也就不需要了，可以注釋或刪除