携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
昨天在尝试写退出功能的时候发现，其实是有退出的。在组件中，可以看到右上角的弹吉他的疯狂小兔子，点开就有退出，好吧被兔子戏法给骗了。
右上角的组件在@/compontents/Hamburger。调用Vuex user模块中的actions方法，将token和roles置空并重置路由信息。
然后登录进去该分析页面了，layout中index.vue文件。
看第一个组件18行在@src/layout/components/side_bar 中，左侧导航栏组件。很简单，用的element组件。collapse属性控制是否折叠，取值为vuex中app模块的sidevar字段。这个字段在layout目录resize.ts文件中也有操作过，是控制移动端适配的，移动端导航栏重置为折叠，点击显示。给导航item套一层判断如果是一个外部链接会直接用href跳转，如果是路由地址就调用路由push方法。item根据路由有没有子路由判断直接使用组件的el-menu-item配置导航还是用组件SidebarItem来根据路由中的child属性递归调用el-menu-item实现层级导航。以上是导航栏组件分析，下一个Navbar。
24行Navbar组件，跟随import我们找到navigation_bar/index.vue文件,文件中的第一个组件Hamburger，是控制折叠导航栏的，在@/components中可以找到，第二个BreadCrum组件就是el-Breadcrumb 面包屑组件（记得所有的展示字段的都要引入国际化用 t(title) 控制文字）用来显示级联的路径，快速跳转，剩下的就是右侧的四个按钮，小兔子是一个下拉按钮，几个下拉item都是很简单的功能。包括上次没有发现的退出功能...
另外三个按钮是移动端不显示的，所以移动端没有国际化嘛？目前也没有发现。screenfull组件全屏直接调用就好了。布局选择，修改vuex中的app模块size属性，重新跳转到现在的路由使其刷新页面。第三个按钮国际化，选中后修改vuex中app模块的language字段。
