前言
好久没有更新博客了，今天就写一下vue脚手架+antd如何架构一个后台管理系统页面，本来是想弄微前端的但是想想还是算了，不过你熟了的话，可以使用微前端进行架构，基于主体布局不变嵌入微前端。
上图
还行，不过有很多细节没有处理好。不过作为一个参考模型是足够了，我的写偏向简单，看一遍就会了
开始
这里我就主要讲两块（页面架构、路由设计）
App.vue
ps：这里添加一个路由组件(一级页面需要)
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style>
</style>
layout.vue
ps：在tab标签下添加一个路由组件（二级页面需要）
<template>
<div>
<a-layout id="components-layout-demo-top-side">
<!-- 头部页 -->
<a-layout-header class="header">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
:default-selected-keys="headerSelectMenu"
:style="{ lineHeight: '64px' }"
@click="changHeaderMenu"
>
<a-menu-item v-for="item in headerMenu" :key="item['id']">
{{item.name}}
</a-menu-item>
</a-menu>
</a-layout-header>
<!-- 主体页 -->
<a-layout-content style="padding: 0 50px">
<!-- 面包屑 -->
<!-- <a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>首页</a-breadcrumb-item>
<a-breadcrumb-item>测试</a-breadcrumb-item>
<a-breadcrumb-item>测试页</a-breadcrumb-item>
</a-breadcrumb> -->
<!-- 左边导航栏 -->
<a-layout style="padding: 24px 0; background: #fff">
<a-layout-sider width="200" style="background: #fff">
<!-- :default-open-keys="leftOpenSelectMenu" -->
<!-- :default-selected-keys="leftSelectMenu" -->
<a-menu
mode="inline"
style="height: 100%"
:default-open-keys="leftOpenSelectMenu"
:default-selected-keys="leftSelectMenu"
@click="changLeftMenu"
>
<a-sub-menu v-for="leftItem in leftMenu" :key="leftItem['id']">
<span slot="title"><a-icon type="user" />{{leftItem['name']}}</span>
<a-menu-item v-for="leftCholdrenItem in leftItem['children']" :key="leftCholdrenItem['id']">
{{leftCholdrenItem['name']}}
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<!-- 页面内容显示 -->
<a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
<!-- 页面标签 -->
<a-tabs v-model="activeKey" type="editable-card" @edit="onEdit" :hideAdd="true" @change="changTab">
<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
<!-- {{ pane.content }} -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</a-tab-pane>
</a-tabs>
</a-layout-content>
</a-layout>
</a-layout-content>
<!-- 底部页 -->
<a-layout-footer style="text-align: center">
Ant Design ©2018 Created by Ant UED
</a-layout-footer>
</a-layout>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
activeKey: [],
panes: [],
headerSelectMenu: ['1'],
headerMenu: [
{
name: '头部导航1',
router: '',
id: "1"
},
{
name: '头部导航2',
router: '',
id: "2"
}
],
leftMenu: [],
leftOpenSelectMenu: [],
leftSelectMenu: [],
leftMenuOne: [
{
name: '头部导航栏1',
router: '',
id: "1",
children: [
{
name: '头部导航栏1-1',
router: '/',
id: "1-1"
},
{
name: '头部导航栏1-2',
router: '/test1',
id: "1-2"
}
]
},
],
leftMenuTwo: [
{
name: '头部导航栏2',
router: '',
id: "2",
children: [
{
name: '头部导航栏2-1',
router: '/test3',
id: "2-1"
},
{
name: '头部导航栏2-2',
router: '/test4',
id: "2-2"
}
]
},
{
name: '用户模块',
router: '',
id: "3",
children: [
{
name: '用户列表',
router: '/user',
id: "3-1"
}
]
},
]
}
},
mounted() {
},
created() {
this.leftMenu = this.leftMenuOne
this.leftSelectMenu = ['1-1']
this.leftOpenSelectMenu = ['1']
// { title: '头部导航栏1-2', content: 'Content of Tab 2', key: '1-2', closable: false }
this.panes = [
{ title: '头部导航栏1-1', content: 'Content of Tab 1', key: '1-1', closable: false}
];
this.activeKey = "1-1"
},
methods: {
changTab(item) {
// 头部导航栏1 点击 到头部导航栏2 tab标签有导航栏1的页面点击不过去
this.leftSelectMenu = [item]
console.log(item)
let keyArr = item.split("-")
console.log(keyArr)
let keyFatherMenu = {}
this.leftMenu.forEach((fatherMenuItem) => {
if (fatherMenuItem['id'] == keyArr[0].toString()) {
keyFatherMenu = fatherMenuItem
}
})
console.log(keyFatherMenu)
let addMenuObj = {}
for(let j =1 ; j < keyArr.length; j ++) {
let keyItem = keyArr[j]
console.log(keyItem)
if ('children' in keyFatherMenu) {
keyFatherMenu['children'].forEach((childrenMenuItem) => {
if (childrenMenuItem['id'] == keyArr[0] + '-' +keyItem) {
addMenuObj = childrenMenuItem
console.log(addMenuObj)
}
})
}
}
this.$router.push({path:addMenuObj['router'], params:{}})
},
callback(key) {
console.log(key);
},
onEdit(targetKey, action) {
this[action](targetKey);
},
remove(targetKey) {
let activeKey = this.activeKey;
let lastIndex;
this.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.panes.filter(pane => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
activeKey = panes[lastIndex].key;
} else {
activeKey = panes[0].key;
}
}
this.panes = panes;
this.activeKey = activeKey;
},
changLeftMenu(item) {
// console.log(item)
for(let i=0; i < this.panes.length; i ++) {
let panesItem = this.panes[i]
if(panesItem['key'] == item['key']) {
this.activeKey = item['key']
let keyArr = item['key'].split("-")
let keyFatherMenu = {}
this.leftMenu.forEach((fatherMenuItem) => {
if (fatherMenuItem['id'] ==keyArr[0]) {
keyFatherMenu = fatherMenuItem
}
})
// console.log(keyFatherMenu)
let addMenuObj = {}
for(let j =1 ; j < keyArr.length; j ++) {
let keyItem = keyArr[j]
// console.log(keyItem)
if ('children' in keyFatherMenu) {
keyFatherMenu['children'].forEach((childrenMenuItem) => {
if (childrenMenuItem['id'] == keyArr[0] + '-' +keyItem) {
addMenuObj = childrenMenuItem
// console.log(addMenuObj)
}
})
}
}
this.$router.push({path:addMenuObj['router'], params:{}})
break
} else {
if (i == this.panes.length - 1) {
// console.log("最后一个元素")
// console.log(this.leftMenu)
let keyArr = item['key'].split("-")
let keyFatherMenu = {}
this.leftMenu.forEach((fatherMenuItem) => {
if (fatherMenuItem['id'] ==keyArr[0]) {
keyFatherMenu = fatherMenuItem
}
})
// console.log(keyFatherMenu)
let addMenuObj = {}
for(let j =1 ; j < keyArr.length; j ++) {
let keyItem = keyArr[j]
// console.log(keyItem)
if ('children' in keyFatherMenu) {
keyFatherMenu['children'].forEach((childrenMenuItem) => {
if (childrenMenuItem['id'] == keyArr[0] + '-' +keyItem) {
addMenuObj = childrenMenuItem
// console.log(addMenuObj)
}
})
}
}
// 显示关闭图标
this.panes.forEach((panesItemTwo) => {
panesItemTwo['closable'] = true
})
// 进行添加
let newAddObj = { title: addMenuObj['name'], content: 'Content of Tab' + item['key'], key: item['key'], closable: false }
// console.log(newAddObj)
this.panes.push(newAddObj)
// 选中当前添加标签
this.activeKey = item['key']
this.$router.push({path:addMenuObj['router'], params:{}})
break
}
}
}
},
changHeaderMenu(item) {
console.log(item['key'])
if(item['key'] == '1') {
this.leftMenu = this.leftMenuOne
this.leftSelectMenu = ['1-1']
this.leftOpenSelectMenu = [item['key']]
this.activeKey = "1-1"
} else if(item['key'] == '2') {
this.leftMenu = this.leftMenuTwo
this.leftSelectMenu = ['2-1']
this.leftOpenSelectMenu = [item['key']]
this.activeKey = "2-1"
}
}
}
}
</script>
<style>
#components-layout-demo-top-side .logo {
width: 120px;
height: 31px;
background: rgba(255, 255, 255, 0.2);
margin: 16px 28px 16px 0;
float: left;
}
</style>
main.js
import Vue from 'vue'
import router from './routers/index'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
路由文件
import Layout from "@/views/layout/index"
/**
* auth true登录才能访问，false不需要登录
* keepAlive true缓存，false不缓存
*/
// 默认路由
export default [
{
path: '/',
component: Layout,
children: [
{
path: '/', // 首页
meta: { auth: false, keepAlive: false },
component: resolve => require(['@/views/home/'], resolve)
},
{
path: '/test', // 测试
meta: { auth: false, keepAlive: false },
component: resolve => require(['@/views/test/'], resolve)
}
]
},
{
path: '/login',
component: resolve => require(['@/views/login/'], resolve),
meta: { auth: false, keepAlive: false },
},
{
path: "/404",
component: resolve => require(['@/views/notFound/'], resolve),
}
]路由权限文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './config'
import Layout from "@/views/layout/index"
const _import = require('./_import_' + process.env.NODE_ENV)
Vue.use(VueRouter)
let getApiRouter = [
{
path: '/',
component: "layout",
children: [
{
path: '/test1', // 测试1
meta: { auth: false, keepAlive: false },
component: "test1"
},
{
path: '/test2', // 测试2
meta: { auth: false, keepAlive: false },
component: "test2"
},
{
path: '/test3', // 测试3
meta: { auth: false, keepAlive: false },
component: "test3"
},
{
path: '/test4', // 测试4
meta: { auth: false, keepAlive: false },
component: "test4"
},
{
path: '/user', // 用户列表
meta: { auth: false, keepAlive: false },
component: "user"
},
]
},
{
path: '*',
redirect: "/404"
}
]
let sumRouter = null
// 路由配置
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes
})
router.beforeEach((to, from, next) => {
console.log(to)
console.log(from)
if (!sumRouter) {
// 处理路由
let dynamicMenu = filterAsyncRouter(getApiRouter)
// 动态添加路由
sumRouter = routes.concat(dynamicMenu)
router.addRoutes(sumRouter)
next({ ...to, replace: true })
}
next()
})
function filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter((route) => {
if (route.component) {
if (route.component === 'layout') {
route.component = Layout
} else {
route.component = _import(route.component)
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
export default router其实也没啥好讲的~想看整体代码进到这个传送门。
结束
总结~好像也没啥好总结的，也就那样。
本内容为合法授权发布，文章内容为作者独立观点，不代表开发云立场，未经允许不得转载。
