Koa&Mongoose&Vue实现前后端分离--08前端状态管理&路由嵌套

@import'~@/stylesheets/layout.scss';.page-container{height:100%;}.page-header{@includeflex($item:center,$content:space-between);背景：#fff；border-bottom:1pxsolid#eaeaea;.page-brand{@includeflex($item:center,$content:space-between);游标：指针；.page-logo-wrap{宽度：46px；高度高：46px；.page-logo{最大宽度：100%；}}}.page-menu{flex:1;背景：透明；边界：0；}}上一节回顾使用密码加密后端参数校验中间件&错误处理工作内容简单使用vuexvue-router嵌套路由vuex本地持久化准备npminstallvuex--save//先切换到/client目录npminstall--savevuex-persist//先切换到/client目录进行布局分析期待的同学layout自己实现layout可以略读“Layout”部分，几乎都是贴代码。布局分析首页和登录页面没有共同的结构，考虑使用对等路由。首页采用自上而下的结构，可以考虑el-container、el-header、el-main的布局。配置页和首页共同的导航栏只是为了将el-main分成左右两部分，考虑使用嵌套路由。配置页面将el-main分为左右两部分，考虑el-container、el-aside、el-main的布局。嵌套路由//更新文件：client/src/router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'importLoginfrom'@/views/login'importLayoutfrom'@/views/layout'import从'@/views/homepage'导入BackStage从'@/views/backstage'导入PersonalPanel从'@/views/personal-panel'导入ApprovePanel从'@/views/approve-panel'Vue.use(Router)导出defaultnewRouter({routes:[{path:'/',redirect:'/login'},{path:'/login',name:'Login',component:Login},{path:'/home',name:'Layout',component:Layout,children:[//children决定子组件在哪里渲染（替换父组件中的）{path:'',name:'HomePage',component:HomePage},{path:'/backstage',//绝对路径，决定跳转路径的计算方式（无前缀）name:'BackStage',component:BackStage,children:[{path:'',name:'personalPanel',component:PersonalPanel},{path:'person',//相对路径，决定跳转路径的计算方式（以父组件路径为前缀）redirect:'/backstage'},{path:'approve',name:'approvePanel',component:ApprovePanel}]}]}]}children控制组件的渲染层级位置匹配哪个router-view匹配路由配置父组件中的router-viewpath控制路由跳转的路径绝对路径：直接通过path值为跳转路径的相对路径：需要加上父组件配置的路径作为前缀，才可以作为跳转路径页面设计//新建一个样式重置文件：客户端/src/样式表/重置。随便找一个...//更新文件：client/src/main.js...import'@/stylesheets/reset.css'...//新建一个样式文件：client/src/stylesheets/layout。scss@mixinflex($dir:row,$content:flex-start,$item:flex-start,$wrap:wrap){display:flex;弹性方向：$dir；证明内容：$内容；对齐项目：$item；flex-wrap:$wrap;}//创建`/home`匹配布局组件:client/src/views/layout/index.vue@import'~@/stylesheets/layout.scss';.page-container{height:100%;}.page-header{@includeflex($item:center,$content:space-between);背景：#fff；border-bottom:1pxsolid#eaeaea;.page-brand{@includeflex($item:center,$content:space-between);游标：指针；.page-logo-wrap{宽度：46px；高度高：46px；.page-logo{最大宽度：100%；}}}.page-menu{flex:1;背景：透明；边界：0；}}@import'~@/stylesheets/layout.scss';以~为前缀，样式可以使用webpack配置的别名//新建文件：client/src/views/homePage/index.vue//新建文件：client/src/views/backstage/index.vue审查。后台容器{高度：100%；.后台菜单{高度：100%；溢出-y：自动；}.backstage-main{margin-left:20px;背景：#fff；}}el-menu's:router="true"配置&el-menu-item's:route="<路由配置对象>"可以直接实现菜单跳转//新文件：client/src/views/approve-panel/index.vue//新文件：client/src/views/personal-panel/index.vue最终展示效果状态管理登录信息public多个组件普通用户信息，存储登录用户信息，替换下图中的用户信息（alias>account）和introducevuex//Newfile:client/src/store/index.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)constInitState={loginer:{}}exportdefaultnewVuex.Store({state:{...InitState},突变:{putLoginer(state,loginer){state.loginer=Object.assign({},state.loginer,loginer)},resetVuex(state){Object.assign(state,InitState)}}})//更新文件:client/src/main.js...importstorefrom'./store'...newVue({el:'#app',router,store,//添加新的components:{App},template:''})//存储状态//更新文件：client/src/views/login/index.vue...asynconLogin(){...console.log(res)如果(res&&a议员；res.code==='200'){this.$store.commit('putLoginer',res.data)this.$router.replace('/home')}else{...}...//显示用户信息//更新文件：client/src/views/layout/index.vue.........logoutclearstate//更新文件：client/src/views/layout/index.vueasynclogout(){this.$router.push('/')this.$store.commit('resetVuex')}，如果状态没有清除，直接进入/home，会发现用户信息依然存在。如果下次登录，用户信息比上次少，甚至没有，部分/全部用户信息将不会被覆盖。效果显示持久化页面刷新，状态会被清除，状态可以持久化到本地//更新文件：client/src/store/index.js...importVuexPersistencefrom'vuex-persist'//添加Vue.use(Vuex)constvuexLocal=newVuexPersistence({//新存储：window.localStorage})...mutations:{putLoginer(state,loginer){state.loginer=Object.assign({},state.loginer,loginer)},resetVuex(state){Object.assign(state,InitState)}},plugins:[vuexLocal.plugin]//添加})高频更新数据，不推荐持久化处理//Logout时你需要清除本地化//更新文件：client/src/views/layout/index.vue...asynclogout(){this.$router.push('/')awaitlocalStorage.clear()this.$store.commit('resetVuex')},...持久化效果展示参考文档vuexvuex-persist