基于Vue和Quasar布局菜单的前端SPA项目（三）复习通过上一篇基于Vue和Quasar的文章在前端SPA项目实战的用户登录（二）介绍中，我们已经完成了登录页面，今天主要介绍布局菜单的实现。UI界面效果首页业务数据菜单展开设置页面说明Layout首页分为三部分，顶部是导航栏，主要包括刷新按钮、返回按钮、用户信息等。左侧为菜单，包括业务数据、元数据、系统三个一级菜单。业务数据菜单二级菜单为表名，元数据菜单包括序号、表、关系三个二级菜单，系统菜单包括设置和关于两个二级菜单。右侧是页面的主要部分。布局嵌套路由通常由多层嵌套组件组成。同样，URL中动态路径的每一段也按照一定的结构对应着每一层的嵌套组件。比如设置Setting页面和切换About页面时，导航和菜单部分不变，主要部分改变。通过嵌套路由实现。/关于/设置+----------------++----------------+|导航||导航||+--------------+||+------------+|||关于||+------------->||设置|||||||||||+------------+||+------------+|+----------------++----------------+MainLayout文件为：src/layouts/MainLayout.vue其中对应上图中的About和Setting部分。定义路由constroutes=[{path:'/',component:()=>import('layouts/MainLayout.vue'),children:[{path:'',component:()=>import('pages/Index.vue')},{name:"about",path:"about",meta:{isAllowBack:true},component:()=>import("pages/About.vue")},{name:"setting",path:"setting",meta:{isAllowBack:true},component:()=>import("pages/Setting.vue")}]}其中meta表示路由元信息，isAllowBack字段用于表示是否可以返回，对应组件页面渲染时通过this.$route.meta.isAllowBack获取值，然后设置全局Vuex状态config/isAllowBack的值。计算属性??computed:{isAllowBack:{get(){返回this.$store.state.config.isAllowBack;}}}MainLayout.vue通过计算属性isAllowBack绑定q-btn，可以控制返回按钮是否显示。首页不需要回，但是设置页和关于页需要回。后退按钮的主要目的是适应不同的浏览器，而不依赖于浏览器的后退功能。比如在H5页面全屏或者嵌入Cordovas??hell时非常有用。菜单控件-expand-allno-connectors/>菜单使用q-tree控件，菜单内容包括固定部分和动态部分。列表：异步函数（页面，rowsPerPage，搜索，查询）{varres=awaitmetadataTable.list（页面，rowsPerPage，搜索，查询）;returnres.data;}，其中业务数据根据表单列表动态显示，通过metadataTableService的list方法查询表单，然后动态渲染。consttables=awaitmetadataTableService.list(1,9999);for(leti=0;i
