前言：关于权限路由的那些事儿……
业务情景描述：现有一个后台管理系统，共存在三种类型的人员，①超级管理员（称作1）；②组别管理员（2）；③普通用户（3）；每种类型的人看到的操作栏并不一样，可以进行的操作也不尽相同，于是就需要程序处理一下各个权限问题。
过程：说难不简单，说简单并不难的过程
【迷茫的前期】
上百度、Google，狂搜了好多关于权限的问题，也许是仁者见仁智者见智吧，五花八门的介绍让自己更加迷茫不堪，真心不知道从哪里下手：
1）让后端返回关于权限的json数据吧，但却不太懂这样的数据应该怎样处理；
2）在前端路由那里处理，可是不明白应该怎样使用何种属性来实现这个功能；
恍然大悟的最后
依靠各种微信群、QQ群试图解决自己遇见的各种问题，显然不太现实，但是如果可以作为一名热心帮助别人的人，其实也蛮有成就感的！
最终解决方案：
【注意点】
1）在route.js中，自定义一个属性并为之附上自己的规则；
2）v-if 自定义函数：
...
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router v-show="!collapsed">
<template v-for="(item,index) in $router.options.routes" v-if="routesFun(item)">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><img :src="item.iconCls" style="vertical-align: middle;width: 17px;padding-right: 5px;"/>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="routesFun(child)"><img :src="child.iconCls" style="vertical-align: middle;width: 16px;padding-right: 5px;"/>{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
...
在 methods中写方法：
...
routesFun(item){ //权限展示判断条件
let loginType = admininfo.getType();
if(!item.hidden && loginType==1){ //超级管理员拥有所有权限
return true;
}
if(!item.hidden && item.route && item.route.indexOf(loginType)>=0){
return true;
}
return false; // if(!item.hidden){
// return true;
// }
// return false;
},
...
3)替换掉demo中的原方法即可；
4)看起来复杂的路由配置，就在前端处理掉了。
后言：其实听别人说再多的理论，也不如自己亲手写写代码试试
坦言自己处理这类问题的时候，考虑的的确没有老大想的周到，于是总是频繁出现问题，每每看见类似于Hme.vue中的“复杂”代码就却步了，以后如果要想成为老大那样厉害的人物，那就需要克服这一“顽固性”缺点。“因为喜欢，所以更加热爱。”