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监听也就不需要了，可以注释或删除