分析vue-admin-template中左侧菜单是如何根据路由渲染的

为什么添加了一个路由对象后左侧会自动渲染出来一个menu的功能菜单?
首先我们看下路由里面的相关信息
进入到每个被拆分后的路由对象文件中

这里我们看到一个很可疑的属性,hidden,尝试着修改为true,发现页面左侧的相应的这个功能菜单不见了,并且为什么,只要添加了路由对象,左侧就会自动渲染多少个呢,顺着思路找,左侧菜单是被sidebar/index所管理的,我们去那里找找答案,找到index.vue文件,我们发现一个很敏感的字眼v-for

发现他这里是根据routes进行循环渲染的,往下查找,最终找到了routes的来源

这里我打印了一下this.$router,内容如下

找到了路由对象中的路由列表,这里就是我们定义过的每一个路由,原来是根据这个渲染的,但是我们还有搞清楚一个问题是,为什么添加了hidden属性,他就能实现显示/隐藏,既然他渲染的是sidebar-item那我们就去这个组件文件中找找答案

这里我们终于搞懂了,为什么能根据hidden来显示菜单了
注意: item是routes中的每一个 hidden为true 这边 v-if 取反是false 就会隐藏
而且这里有个条件,并不是所有路由都会被渲染出来,例如我们有登录路由,和404路由,还有首页,他并没有进行渲染

我们先来解读这一行v-if条件是什么
为了方便你们了解,每个路由对象,这里我都叫父级路由对象,而每个路由对象里面的children,我这里统一叫子级路由对象,别混淆了

1. hansOneShowIngChild(item.childer,item)传入了一个父级和父级中一个子级(children),接着进行筛选,showingChildren保存了是一个true/false的值,筛选的条件是 父级路由对象里面的子级路由中hidden值为true,则返回false,如果子级路由中hidden为false,则返回true,并把子级路由赋值给this.onlyOneChild,打个比方,必须我有个子级路由里hidden为false,这里就返回true,那么上面的v-if中的hasONeShowingChild就表示为true,为true那么就显示template中的代码,右侧会有显示对应的菜单
2. 如果子级为falsehansOneShowIngChild就为true,但是还要满足后面的条件,!onlyONeChild.children,就是子级里面还有没有子级,有子级为true,没子级为false,我们这里子级里没有子级就是false,false取反为true,接着再看逻辑与后面的条件onlyOneChild.noShowingChildren, 这里showingChildren就是子级路由对象,如果有子级路由对象,则返回true,并且,如果子级路由对象长度为0,也就是没有子级路由对象,那么this.onlyOneChild(代表的子级路由),赋值为{...paeent,path:'',noSHowingChildren:true},也就说,没有的话,在上面的判断条件中,还是返回的为true
3. 那么经过逻辑或和逻辑与的层层筛选,最终,返回true,
   

小细节:为什么login路由和404以及首页没有显示在左侧菜单呢,因为他们设置了hidden为true,注意不是children中hidden为true,而是父级为true,所以无法显示,然后其他页面的路由中并没有设置hidden的值,不设置就是undefined,转换一下就是false,也就是显示,而外层div可以决定是否显示整体,而children里面的hidden可以决定是否显示左侧菜单中的某些功能,比如点击跳转,以及名称显示