建立文件目录side-menu，side-menu.vue未左侧菜单组件
image.png
新建router.js文件，定义路由
router路由分为三类，便于后期权限显示判断，分别为：
- loginRouter--不作为Main组件的子页面，如：login
- otherRouter--作为Main组件的子页面但不现实在左侧菜单的编辑或详情页，如：个人中心
- appRouter--作为Main组件的子页面并且显示在左侧菜单的页面
// import Main from '@/views/Main.vue';
// 不作为Main组件的子页面展示的页面单独写，如下
export const loginRouter = {
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录'
},
};
// 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里
export const otherRouter = {
path: '/',
icon: 'table',
name: 'otherRouter',
redirect: '/home',
component: Main,
children: [
{
icon: 'table',
path: '/dashboard',
title: '个人中心',
name: 'ownspace_index',
},
]
};
// 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里
export const appRouter =[
{
path: '/base_table',
icon: 'table',
name: 'home',
title: '首页测试',
component: Main,
children: [
{
path: '/base_table/first',
icon: 'table',
name: 'home_index',
title: '首页',
access: [0],
component: () => import('@/views/Home.vue')
},
{
path: '/base_table/second',
icon: 'table',
name: 'text',
title: '测试',
access: [0],
component: () => import('@/views/text.vue')
},
]
}
]
// 所有上面定义的路由都要写在下面的routers里
export const routers = [
loginRouter,
otherRouter,
...appRouter,
// page500,
// page403,
// page404,
];
新建store.js，用于存放菜单项的状态，以及定义menuList菜单数组
引入appRouter,otherRouter等数据列
生成公共的菜单数组数据
import Vue from 'vue'
import Vuex from 'vuex'
import {otherRouter, appRouter} from './router/routers';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cachePage: [],
lang: '',
isFullScreen: false,
openedSubmenuArr: [], // 要展开的菜单数组
menuTheme: 'light', // 主题
themeColor: '',
pageOpenedList: [{
title: '首页',
path: '',
name: 'home_index'
}],
currentPageName: '',
currentPath: [
{
title: '首页',
path: '',
name: 'home_index'
}
], // 面包屑数组
menuList: [],
routers: [
otherRouter,
...appRouter
],
tagsList: [...otherRouter.children],
messageCount: 0,
dontCache: ['text-editor', 'show-loan'] // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
},
mutations: {
setTagsList (state, list) {
state.tagsList.push(appRouter[0]);
},
},
actions: {
}
})
side-menu.vue
定义菜单子组件
<template>
<a-menu theme="light" mode="inline"
@click="menuClick"
@openChange="openChange"
:openKeys="openKeys"
:selectedKeys="selectedKeys">
<template v-for="(item,index) in menuList"><!--一级遍历-->
<template v-if="item.children && item.children.length > 0"><!--如果存在子集-->
<a-sub-menu :key=item.path :index="item.index">
<span slot="title"><span>{{item.title}}</span></span> <!-- 首页测试-->
<template v-for="(subItem,subIndex) in item.children"><!--//二级遍历-->
<a-sub-menu v-if="subItem.children" :key=subItem.path><!--如果存在子集-->
<!--<template slot="title">{{ subItem.title }}</template>-->
<a-menu-item v-for="(threeItem,i) in subItem.children" :key="threeItem.path"
:index="threeItem.index"><!--三级遍历-->
<span>{{threeItem.title}}</span>
</a-menu-item>
</a-sub-menu>
<a-menu-item v-else :key=subItem.path :index="subIndex">
<span>{{subItem.title}}</span>
</a-menu-item>
</template>
</a-sub-menu>
</template>
<template v-else>
<a-menu-item :key=item.path :index="index">
<span><span>{{item.title}}</span></span>
</a-menu-item>
</template>
</template>
</a-menu>
</template>
<script>
import vTabs from '@/components/MultiTab'
import vHeader from "@/views/common/Header.vue";
import vUserMenu from '@/views/common/TopRightMenu'
import SettingSideBar from "@/views/common/SettingSideBar";
import vTitle from "@/views/common/TitleBar";
export default {
name: "side-menu",
components: {
vTitle,
SettingSideBar,
vHeader,
vTabs,
vUserMenu,
},
data() {
return {
collapsed: false,
titleBar: '系统首页',
selectedKeys: [this.$route.fullPath],
openKeys: [],
menuList:this.$store.state.tagsList,
}
},
methods: {
menuClick({item, key, keyPath}) {
this.$router.push(key)
},
openChange(keys) {
this.openKeys = keys
console.log('openChange', keys)
},
setItem(router) {
this.selectedKeys = [router.fullPath]
// this.openKeys = ['/base_table']
this.items.forEach((item) => {
if (item.subs && item.subs.length > 0) {
item.subs.forEach((subItem) => {
if (subItem.path === router.fullPath) {
this.openKeys = [item.path]
}
})
}
})
},
},
mounted(){
console.log(this.menuList);
},
watch: {
$route(newValue, oldValue) {
console.log('router', newValue)
this.setItem(newValue)
this.titleBar = newValue.meta.title
},
tagsList() {
console.log('tagsList', this.tagsList)
}
}
}
</script>
<style scoped>
</style>
Home.vue
调用菜单组件
<template>
<div class="wrapper">
<div>
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider
:style="{width:'200px',background:'white'}"
:trigger="null"
:collapsible="true"
v-model="collapsed">
<div class="logo">
<p>后台管理系统</p>
</div>
<sedMenu></sedMenu>
</a-layout-sider>
<a-layout>
<v-header @onCollapseClick="toCollapse"></v-header>
<!--<v-tabs style="margin-top: 3px"></v-tabs>-->
<v-title :title="titleBar"></v-title>
<a-layout-content
:style="{ height: '500px',width:'100%',minHeight:'100vh',padding:'16px',overflow:'auto'}">
<!-- 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</a-layout-content>
</a-layout>
</a-layout>
</div>
<setting-side-bar></setting-side-bar>
</div>
</template>
以上。
网友评论