基於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，然后實現了設置頁面和關於頁面功能。其它菜單對應的功能暫時為空，后續會從元數據菜單開始進一步介紹序列號功能。
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由於網絡原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。