0 环境
1 参考文档
2 正文
el-main就是下面部门列表的截图的区域。router-view组件使用了具名插槽，并解构赋值获取 Component 和 route 对象。Component 意味着是当前路由匹配到的组件实例，route 意味着是当前路由的信息对象。
transition是一个过渡的动画，具体解释看下面的截图。这里的自定义 CSS 类名: fade-transform，就在src/styles/common.scss中。下面第二个截图就是。
先看47-51行当元素进入或者离开时，0.2s完成元素的过渡。再看52-26行，进入时的初始状态是透明的+0.2s的动画+水平方向左移30px。在离开时的最终状态，透明+0.2s动画+水平方向右移30px。
1 createComponentWrapper
看下图：
再往下keep-alive，keepAliveName就是之前保持的keep-alive的数组，include动态绑定它。再往下就是组件的渲染，v-if决定该组件是否需要渲染，key就是加了一个唯一键，重点是createComponentWrapper，看下面代码的截图。
这里是解决详情页的，正常我们是维护侧边栏的路由，它们是被存在keep-alive数组中的，但是详情页不再其中维护的。先判断组件是否存在，不存在直接返回，存在的话，在往下拿到路由的fullPath，先看Map里是否有，有的话，直接渲染返回，没有的话，先组装个name和render，然后在将其传给map，然后在渲染返回。
2 监听当前页面
看下图，这里就是监听maximize，监听真假的变化，一旦有变拿到app或者说算是根节点，全屏时，在其上面添加类main-maximize，否则在这个节点移除该类。
找到src/styles/element.scss，它呢就是指定的类名，隐藏其元素。.el-aside对应的是侧边栏，.el-header对应头部，.el-footer对应版权的显示，.tabs-box就是标签栏那行的隐藏。
这里还有个 .aside-split就是指你在分栏时，别忘了把这块也给隐藏掉。
3 监听布局变化
这里在 body 上添加相对应的layout class，比如下图布局样式的切换时。
4 监听窗口大小变化
再看下图，这里做了一个防抖，先得到当前窗口的宽度，小于1200，折叠，否则展开。当然还有判断前途，就是小于1200时，已折叠了就pass，大于1200，未折叠就pass。在往下就是监听调用listeningWindow。在之后就是组件卸载时，移除事件监听。
3 小结
主要是Main组件细节的串联，了解即可。
