基於Vue和Quasar的前端SPA項目crudapi後臺管理系統實戰之佈局菜單嵌套路由（三）

基於Vue和Quasar的前端SPA項目實戰之佈局菜單（三）

回顧

經過上一篇文章 基於Vue和Quasar的前端SPA項目實戰之用戶登陸（二）的介紹，咱們已經完成了登陸頁面，今天主要介紹佈局菜單的實現。

UI界面

效果

首頁

業務數據菜單展開

設置頁面

說明

佈局主頁分爲三個部分，

1. 最上面爲導航欄，主要包括刷新按鈕，後退按鈕，用戶信息等內容。
2. 左邊爲菜單，包括業務數據，元數據，系統三個一級菜單。業務數據菜單的二級菜單爲表名稱，元數據菜單包括序列號、表、關係三個二級菜單，系統菜單包括設置和關於兩個二級菜單。
3. 右邊爲頁面主體部分。

佈局

嵌套路由

一般由多層嵌套的組件組合而成。一樣地，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便可，代碼同步更新。