用戶在菜單區(qū)點(diǎn)擊菜單后，菜單對(duì)應(yīng)路由內(nèi)容將顯示在右側(cè)主操作區(qū)，同時(shí)添加新的標(biāo)簽頁（如果標(biāo)簽頁不存在），用戶點(diǎn)擊不同的頁簽完成頁面內(nèi)容切換呆躲。這種頁面分區(qū)效果是大部分后臺(tái)管理系統(tǒng)使用的頁面風(fēng)格。下面我們就一步步來完成頁面框架的開發(fā)吧瘦馍。
1歼秽、創(chuàng)建布局組件
在src\views目錄中添加Layout.vue文件，文件內(nèi)容如下：
<script setup>
</script>
<template>
<a-layout>
<a-layout-header><span style="color: white;">Header</span></a-layout-header>
<a-layout>
<a-layout-sider><span style="color: white;">Sider</span></a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
</a-layout>
</template>
<style scoped>
section.ant-layout {
height: 100%;
}
</style>
根據(jù)標(biāo)簽名稱基本可以看出每個(gè)標(biāo)簽所對(duì)應(yīng)含義情组。樣式section.ant-layout是為了讓整個(gè)頁面高度占滿屏幕可視區(qū)域燥筷。
2、修改App.vue文件
修改App.vue文件內(nèi)容院崇，引入Layout.vue組件并定義組件渲染位置：
<script setup>
import {ref} from 'vue';
import layout from "./views/Layout.vue";//引入組件肆氓，名稱和template中的標(biāo)簽名相同即可
const pageMaskShow = ref(false);
const showPageMask = () => {
pageMaskShow = true;
};
const closePageMask = () => {
pageMaskShow = false;
};
</script>
<template>
<a-spin size="large" :spinning="pageMaskShow"><!--使用加載組件的目的是為后續(xù)ajax請(qǐng)求時(shí)添加遮罩-->
<layout></layout>
</a-spin>
</template>
<style scoped>
.ant-spin-nested-loading {/*遮罩高度100%*/
height: 100%;
}
:deep(.ant-spin-container) {/*遮罩容器高度100%*/
height: 100%;
}
</style>
這里需要注意：由于相關(guān)組件在dom結(jié)構(gòu)中都屬于id為app的div的子元素，因此需要將id為app的div高度設(shè)置為100%底瓣，否則后續(xù)子元素高度100%將不會(huì)生效谢揪。要設(shè)置id為app的div的高度，需要在index.html文件中添加<style>標(biāo)簽捐凭，index.html文件內(nèi)容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<style>
#app {/*添加樣式定義*/
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
3拨扶、查看效果
在vscode終端執(zhí)行npm run dev命令啟動(dòng)服務(wù)，打開瀏覽器訪問http://localhost:8090茁肠，出現(xiàn)以下頁面
4患民、定義系統(tǒng)菜單組件
在src\views文件夾中創(chuàng)建SysMenu.vue文件，文件內(nèi)容如下：
<script setup>
import { ref } from 'vue';
import { PieChartOutlined, MailOutlined } from '@ant-design/icons-vue';
const SubMenu = {
name: 'SubMenu',
props: {
menuInfo: {
type: Object,
default: () => ({}),
},
},
template: `
<a-sub-menu :key="menuInfo.key">
<template #icon><MailOutlined /></template>
<template #title>{{ menuInfo.title }}</template>
<template v-for="item in menuInfo.children" :key="item.key">
<template v-if="!item.children">
<a-menu-item :key="item.key">
<template #icon>
<PieChartOutlined />
</template>
{{ item.title }}
</a-menu-item>
</template>
<template v-else>
<sub-menu :menu-info="item" :key="item.key" />
</template>
</template>
</a-sub-menu>
`,
components: {
PieChartOutlined,
MailOutlined,
},
};
const list = [{
key: '1',
title: '頁面1',
}, {
key: '2',
title: '頁面2',
}];
const selectedKeys = ref([]);//處于選中狀態(tài)的節(jié)點(diǎn)key列表
const openKeys = ref([]);//處于展開狀態(tài)的節(jié)點(diǎn)key列表
function selectedMenuNode(nodeInfo) { //根據(jù)選擇的菜單垦梆，路由到不同的頁面
if (nodeInfo.key == '1') {
$router.push("/page1");
} else if (nodeInfo.key == '2') {
$router.push("/page2");
}
}
</script>
<template>
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" @select="selectedMenuNode">
<template v-for="item in list" :key="item.key">
<template v-if="!item.children">
<a-menu-item :key="item.key">
<template #icon>
<PieChartOutlined />
</template>
{{ item.title }}
</a-menu-item>
</template>
<template v-else>
<sub-menu :key="item.key" :menu-info="item" />
</template>
</template>
</a-menu>
</template>
<style scoped>
</style>
菜單由list數(shù)組數(shù)據(jù)生成匹颤，這個(gè)菜單數(shù)據(jù)可以與后端服務(wù)聯(lián)動(dòng)，通過數(shù)據(jù)庫表定義菜單數(shù)據(jù)托猩，不過這是后話印蓖。
注意：如果ant-design-vue3的單頁遞歸生成菜單組件如果出現(xiàn)運(yùn)行異常，需要修改vite.config.js文件京腥，修改后的內(nèi)容如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js' // 定義vue的別名赦肃，如果使用其他的插件，可能會(huì)用到別名公浪，該配置同時(shí)解決ant-design-vue中單頁遞歸生成導(dǎo)航菜單時(shí)會(huì)出現(xiàn)異常的問題
}
},
plugins: [vue()],
server: {
port: 8090,//前端端口
hmr: true,//是否啟用熱i部署
proxy: {//反向代理摆尝，通過axios調(diào)用后端服務(wù)，解決跨域問題
"/api": {
target: "http://localhost:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
}
}
})
5因悲、修改Layout.vue文件
文件內(nèi)容如下：
<script setup>
import {ref} from 'vue';
import sysmenu from './SysMenu.vue';//引入菜單組件
const isCollapsed = ref(false);
const switchCollapsed = () => {
isCollapsed.value = !isCollapsed.value;
};
</script>
<template>
<a-layout>
<a-layout-header><span style="color: white;">Header</span></a-layout-header>
<a-layout>
<a-layout-sider v-model:collapsed="isCollapsed">
<sysmenu></sysmenu><!--自定義標(biāo)簽堕汞，與引入的組件變量名一致-->
</a-layout-sider>
<a-layout-content>
<router-view></router-view><!--路由顯示區(qū)域-->
</a-layout-content>
</a-layout>
</a-layout>
</template>
<style scoped>
section.ant-layout {
height: 100%;
}
</style>
這樣，點(diǎn)擊菜單后晃琳，就可以在主操作區(qū)顯示不同的頁面內(nèi)容了讯检。
現(xiàn)在，應(yīng)用頁面框架基本形成卫旱，只是現(xiàn)在只能做到頁面覆蓋人灼，還做不到多標(biāo)簽頁切換，下一篇文章將改造相關(guān)功能顾翼，達(dá)到多頁面切換的效果投放。
