在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.又有哪些难题产生了，那麼就时假如你点一下现如今亮度高工具栏时（一个工具栏点2次），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监控也就不需要了，可以 注释或删除