携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
还剩一个组件，就是页签栏，这里记录着打开过的页签，像浏览器的页签一样。它就是layout中tags_view这个组件。
看第13行这个组件就是一个element中的自定义滚动条样式。这里定义了一个滚动触发事件，事件是来做什么的我们稍后根据操作说一下，这里的页签是保存在vuex状态中的。每次跳转新路由页面时还有生命周期钩子onBeforeMount()会触发addTags()事件，这个事件在第209行，是将当前页面路由记录到vuex状态中。在刚进入页面时会调用onBeforeMount方法，先初始化路由组件initTags()，然后addTags()。这个方法将路由添加到state中，有的页面会有保存状态的需求，所以会使用keep-alive功能include属性，添加路由的时候调用actions，会分别根据条件添加到state中的visitedViews字段、cachedViews字段。
顺便说一下Vue的 devtools调试工具，chrome浏览器104版本 Vue.js devtools 6.2.1版本，没有Vuex的显示。在stack overflow中查到的的原因，有一个回答是项目中引用的Vuex版本有问题，从4.0.0升级到4.0.2就可以重新显示了，我看了一下自己Vuex版本 4.0.0 ,像他一样升级到了4.0.2再重新打开chrome浏览器就可以正常显示vuex插件了。
接下来分析页面，登录页一个video标签，使用绝对定位，宽高100%，z-index -1，作为整个页面的背景图。点击登录校验表单。点击之后mock模拟数据返回信息，如果数据返回code为0且返回了token信息，就将token存到本地cookie，如果是从其他路由页面进入的login，则重新跳转至该页面，否则就跳转到首页。还是会重新校验一遍登录状态就是token。首页里管理员页面组件GithubCorner，绝对定位到右上角。PanelGroup组件。使用了el-row col布局，数字滚动效果使用的vue count-to组件。
