基于element NavMenu 导航菜单布局样式，对vue-typescript-admin-template进行更改

目前菜单项为静态生成

界面截图

路由设置

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-menu
        router
        :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;
  }

}