前言：在现在这种大的社会背景下，人们的需求更加的个性化了，而之前为了解放开发复杂的原生开发状态，现有的组件库已经远远不能满足人们高质量的需求了，这两天开发发现了一些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监听也就不需要了，可以注释或删除