目前菜单项为静态生成
界面截图
路由设置
import Vue from "vue";
import Router from "vue-router";
import Layout from './views/main/main.vue';Vue.use(Router);export default new Router({// mode: "history",base: process.env.BASE_URL,routes: [{path: '/permission',component: Layout,redirect: '/permission/adminAccount',name: 'permission',meta: { title: '权限管理'},children: [{path: 'adminAccount',component: () => import('@/views/permission/adminAccount/adminAccount'),name: 'adminAccount',meta: { title: '管理员账户管理' },},{path: 'menuList',component: () => import('@/views/permission/menuList/menuList'),name: 'menuList',meta: { title: '菜单列表' },},{path: 'adminRole',component: () => import('@/views/permission/adminRole/adminRole'),name: 'adminRole',meta: { title: '管理员角色' },},{path: 'adminRolePermission',component: () => import('@/views/permission/adminRolePermission/adminRolePermission'),name: 'adminRolePermission',meta: { title: '管理员角色权限' },},],},]
});
App.vue
<template><div id="app"><router-view/> //根据路由查询内容</div>
</template><script>
import App from "./App.ts";
export default App;
</script><style scoped></style>Main
main.vue
<template><div style="width:100%;height:100%"><div :style="{ width: siderWidth + 'px'}" class="sidebar-container"><siderBar :siderWidth="siderWidth" :isCollapse="isCollapse"></siderBar></div><div class="main-container" :style="{ width: mainWidth + 'px'}"><navBar @changeNav="onChange"></navBar><div class="content"><router-view/></div></div><div class="footer"><div style="text-align: center;">2016-{
{year}} ? XXXXX</div></div></div>
</template><style>
body {margin: 0px;overflow-x: hidden;
}.footer {width: 100%;background-color: #fff;z-index: 1;height: 30px;line-height: 30px;
}.sidebar-container {float: left;/* display: inline-block; */position: relative;left: 0px;;height: 100%;
}.main-container {position: relative; display: inline-block;top:0px;min-height: 94%;
}.content {margin-top: 60px;padding: 0px 10px 30px 0px;width: 100%;
}
</style><script>
import Main from "./main.ts";
export default Main;
</script>main.ts
/*** @module views\main*/
import Vue from "vue";
import Enumerable from "linq";
import { Component } from "vue-property-decorator";
import { IndexObject } from "@/types";
import siderBar from "@/components/layout/siderBar";
import navBar from "@/components/layout/navBar";
import basicInformation from "@/views/basicData/enterpriseBasicInformation/basicInformation";@Component({components: { siderBar, navBar, basicInformation }
})
export default class Main extends Vue {private isCollapse = false;private mainWidth = 0;private siderWidth = 181;private year = (new Date()).getFullYear();mounted() { this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;}private onChange() {if (this.isCollapse) {this.isCollapse = false;this.siderWidth = 181;this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;return;} else {this.isCollapse = true;this.siderWidth = 64;this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;return;}}
}
顶部导航栏
navBar.vue
<template><div class="navbar"><span @click="$emit('changeNav')" class="icon iconfont icon-queding"></span><el-breadcrumb class="breadcrumb" separator="/"><el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"><span v-if="item.redirect === 'noredirect' || index == breadcrumbs.length-1" class="no-redirect">{
{ item.meta.title }}</span><a v-else @click.prevent="handleLink(item)">{
{ item.meta.title }}</a></el-breadcrumb-item></el-breadcrumb><div class="right-menu"><div style="display:inline-block;padding-right:20px"><span style="font-size:32px" class="icon iconfont icon-icon28"></span><span>XXXX</span></div><span class="icon iconfont icon-shezhi"></span></div></div>
</template><style scoped>
.navbar {position: fixed;height: 50px;padding: 0px 20px;border-bottom: 1px solid #ccc;line-height: 50px;width: 100%;overflow: hidden;background-color: #ffffff;z-index: 2;
}.right-menu {display: inline-block;position: fixed;right: 10px;
}.breadcrumb {display: inline-block;padding-left: 20px;
}
</style><script>
import NavBar from "./navBar.ts";
export default NavBar;
</script>navBar.ts
/*** @module components\layout\navBar*/
import Vue from "vue";
import { Component,Watch } from "vue-property-decorator";
import { RouteRecord } from 'vue-router';
import pathToRegexp from 'path-to-regexp';@Component
export default class NavBar extends Vue {private breadcrumbs: RouteRecord[] = [];@Watch('$route')private onRouteChange() {this.getBreadcrumb();}created() {this.getBreadcrumb();} private getBreadcrumb() {let matched = this.$route.matched.filter((item) => item.name);this.breadcrumbs = matched.filter((item) => {return item.meta && item.meta.title && item.meta.breadcrumb !== false;});}private pathCompile(path: string) {const { params } = this.$route;const toPath = pathToRegexp.compile(path);return toPath(params);}private handleLink(item: any) {const { redirect, path } = item;if (redirect) {this.$router.push(redirect);return;}this.$router.push(this.pathCompile(path));}
}
侧导航栏
siderBar.vue
<template><div id="sidebar" :style="{ width: siderWidth + 'px'}" class><el-menurouter:default-active="active"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"unique-opened:collapse="isCollapse"style="width:100%"><el-submenu index="1"><template slot="title"><i class="icon iconfont icon-location iconStyle"></i><span slot="title">基础数据</span></template><el-submenu index="1-1"><span slot="title">企业基本信息</span><el-menu-item index="/basicData/enterpriseBasicInformation/basicInformation">企业基本资料</el-menu-item><el-menu-item index="/basicData/enterpriseBasicInformation/organizationalStructure">组织架构</el-menu-item></el-submenu> </el-submenu><el-submenu index="5"><template slot="title"><i class="icon iconfont icon-location iconStyle"></i><span slot="title">权限管理</span></template><el-menu-item index="/permission/adminAccount">管理员账户管理</el-menu-item><el-menu-item index="/permission/menuList">菜单列表</el-menu-item><el-menu-item index="/permission/adminRole">管理员角色</el-menu-item><el-menu-item index="/permission/adminRolePermission">管理员角色权限</el-menu-item></el-submenu></el-menu></div>
</template><style scoped>
#sidebar {position: fixed;overflow-x: hidden;height: 100%;background-color: #545c64;z-index: 2;
}.iconStyle {margin-right: 5px;font-size: 16px;
}#sidebar::-webkit-scrollbar {width: 0px; /*滚动条宽度*/
}#sidebar:hover::-webkit-scrollbar {width: 4px;
}/*定义滚动条轨道 */
#sidebar::-webkit-scrollbar-track {border-radius: 10px;background-color: #545c64;
}/*定义滑块*/
#sidebar::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(255, 255, 255, 0.2);
}
</style><script>
import SiderBar from "./siderBar.ts";
export default SiderBar;
</script>siderBar.ts
/*** @module components\layout\siderBar*/
import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";@Component
export default class SiderBar extends Vue {private active = "/basicData/enterpriseBasicInformation/basicInformation";@Prop({ default: false }) isCollapse!: boolean;@Prop({ default: "181" }) siderWidth!: string;mounted() {this.active = this.$route.path;}@Watch('$route')private onRouteChange() {this.active = this.$route.path;}}