基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之布局菜单嵌套路由（三）

crudapi

关注

发布于: 2021 年 04 月 08 日

基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之布局菜单嵌套路由（三）

基于 Vue 和 Quasar 的前端 SPA 项目实战之布局菜单（三）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA项目实战之用户登录（二）的介绍，我们已经完成了登录页面，今天主要介绍布局菜单的实现。

UI 界面

效果

首页

业务数据菜单展开

设置页面

说明

布局主页分为三个部分，

最上面为导航栏，主要包括刷新按钮，后退按钮，用户信息等内容。
左边为菜单，包括业务数据，元数据，系统三个一级菜单。业务数据菜单的二级菜单为表名称，元数据菜单包括序列号、表、关系三个二级菜单，系统菜单包括设置和关于两个二级菜单。
右边为页面主体部分。

布局

嵌套路由

通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：设置 Setting 页面和关于 About 页面切换的时候，导航和菜单部分都不变，变化的是主体部分，可以通过嵌套路由实现。

/about                                /setting+------------------+                  +-----------------+| nav             |                   | nav             || +--------------+ |                  | +-------------+ || | About        | |  +------------>  | | Setting     | || |              | |                  | |             | || +--------------+ |                  | +-------------+ |+------------------+                  +-----------------+

复制代码

MainLayout

文件为：src/layouts/MainLayout.vue

<q-page-container>  <router-view /></q-page-container>

复制代码

其中<router-view />对应上图 About 和 Setting 部分。

定义路由

const routes = [  {    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 字段用于表示是否可以后退，在对应的 component 页面渲染的时候通过 this.$route.meta.isAllowBack 获取值，然后设置全局 Vuex 状态 config/isAllowBack 的值。

computed 计算属性

<q-btn  v-show="isAllowBack === true"  flat  dense  round  @click="goBack"  icon="arrow_back_ios"  aria-label="Back"></q-btn>
computed: {  isAllowBack: {    get() {      return this.$store.state.config.isAllowBack;    }  }}

复制代码

MainLayout.vue 中通过 computed 计算属性 isAllowBack 绑定 q-btn，这样可以控制后退按钮是否显示。首页不需要后退，设置页面和关于页面就需要后退。后退按钮主要目的是适应不同的浏览器，不依赖浏览器的后退功能，比如 H5 页面全屏或者嵌入到 Cordova 壳子里面的时候就非常有用了。

菜单

控件

<q-tree  selected-color="primary"  :nodes="allMenu"  :selected.sync="selected"  @update:selected="onMenuClickAction()"  ref="qTreeProxy"  node-key="labelKey"  default-expand-all  no-connectors/>

复制代码

菜单用到了 q-tree 控件，菜单的内容是包括固定部分和动态部分。

list: async function(page, rowsPerPage, search, query) {  var res = await metadataTable.list(page, rowsPerPage, search, query);  return res.data;},

复制代码

其中业务数据是根据表单列表动态显示的，通过 metadataTableService 的 list 方法查询表单，然后动态渲染。

const tables = await metadataTableService.list(1, 9999);for (let i = 0; i < tables.length; i++) {  let table = tables[i];  this.businessMenu.children.push({      label: table.caption,      labelKey: this.getBussinessPath(table.name),      icon: "insert_chart_outlined"  });}
this.allMenu.push(this.businessMenu);this.allMenu.push(this.metadataMenu);this.allMenu.push(this.systemMenu);
this.$refs.qTreeProxy.setExpanded("business", true);this.$refs.qTreeProxy.setExpanded("metadata", true);this.$refs.qTreeProxy.setExpanded("system", true);

复制代码

方法this.$refs.qTreeProxy.setExpanded可以控制菜单展开。

小结

本文主要介绍了嵌套路由和菜单功能，用到了 router-view 和 q-tree，然后实现了设置页面和关于页面功能。其它菜单对应的功能暂时为空，后续会从元数据菜单开始进一步介绍序列号功能。

demo 演示

官网地址：https://crudapi.cn

测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub 地址

https://github.com/crudapi/crudapi-admin-web

Gitee 地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因，GitHub 可能速度慢，改成访问 Gitee 即可，代码同步更新。

发布于: 2021 年 04 月 08 日阅读数: 24

原文链接:【http://xie.infoq.cn/article/da1f8024d136a7e45b5593031】。

crudapi

关注

crudapi是crud+api组合，表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网：https://crudapi.cn 演示：https://demo.crudapi.cn/crudapi/login

发布

暂无评论

创作场景

基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之布局菜单嵌套路由（三）

基于 Vue 和 Quasar 的前端 SPA 项目实战之布局菜单（三）

回顾

UI 界面

效果

说明

布局

嵌套路由

MainLayout

定义路由

computed 计算属性

菜单

控件

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论