1、1vue系统平台模板(element-ui)--头部侧边栏框架搭建

最近在整理系统平台的demo,记录一下，后续可以继续更新
1、基本样式




2、代码结构

3、头部和侧边栏
top-menu

<template>
    <div class="topbar-title">
        <el-row>
          <el-col :span="24">
            <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true" >
                <el-menu-item v-for="(item,i) in menu" :key="i" :index="item.url">
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: 'topMenu',
        data () {
            return {
                menu: [
                    {title:'标题',url:'/list'},
                ],
                defaultActiveIndex:'/list',
                choseTabs:'',
            }
        },
        mounted () {
            let gotHistory = JSON.parse(localStorage.getItem("chooseTabs"))
            if(gotHistory){
                this.defaultActiveIndex = gotHistory
            }
            // 组件创建完后获取数据
            this.fetchNavData();
        },
        methods: {
            handleSelect(index){
                this.defaultActiveIndex = index
                localStorage.setItem("chooseTabs", JSON.stringify(this.defaultActiveIndex))
            },
            //菜单初始化
            fetchNavData(){
                let cur_path = this.$route.path; //获取当前路由
                // console.log(cur_path)
                let routers = this.$router.options.routes; // 获取路由对象
                // console.log(routers)
                let nav_type = "", nav_name = "";
                for (var i = 0; i < routers.length; i++) {
                let children = routers[i].children;
                if(children){
                        for (let j = 0; j < children.length; j++) {
                            if (children[j].path === cur_path) {
                                // nav_type = routers[j].type;
                                nav_name = children[j].type;
                                break;
                            }
                            // 如果该菜单下还有子菜单
                            if(children[j].children) {
                                let grandChildren = children[j].children;
                                for(let z=0; z<grandChildren.length; z++) {
                                    if(grandChildren[z].path === cur_path) {
                                        // nav_type = routers[j].type;
                                        nav_name = grandChildren[z].type;
                                        break;
                                    }
                                }
                            }
                        }
                        
                    }
                }
                // this.$store.state.topNavState = nav_type;
                this.$store.state.leftNavState = nav_name;
                localStorage.setItem("nav_name", JSON.stringify(nav_name))
                if(cur_path == "/"){
                    this.choseTabs = "/LeftListTab"
                    this.handleSelect(this.choseTabs)
                } else {
                    this.choseTabs = '/' + nav_name
                    this.handleSelect(this.choseTabs)
                }
                localStorage.setItem("chooseTabs", JSON.stringify(this.choseTabs))
            },
        },
        watch: {
            '$route': function(to, from){
                this.fetchNavData();
            }
        }
    }
</script>

<style lang="less" scoped>
.topbar-title .el-menu{
    background-color: #3E3D68 !important;
}
.topbar-title .el-menu-demo{
    border-bottom:none !important;
}
.topbar-title .el-menu-demo>.el-menu-item{
    color: #fff !important;
    padding:0 30px !important;
}
.topbar-title .el-menu-item:hover{
    background: rgba(190,190,190,0.5) !important;
}
.topbar-title .el-menu-item:focus{
    background: rgba(190,190,190,0.5) !important;
}
.topbar-title .el-menu-item{
    border-bottom:none !important;
}
.topbar-title .el-menu-item.is-active {
    background: rgba(190, 190, 190, 0.5) !important;
}
</style>

leftNav

<template>
<aside>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo"  :collapse="collapsed" ref="leftNavigation">
        <template v-for="(issue,index) in $router.options.routes">
            <template v-if="issue.type === $store.state.leftNavState">
                <template v-for="(item,index) in issue.children">
                    <el-submenu v-if="!item.leaf" :index="index+''" :key="item.name" v-show="item.menuShow">
                    <template slot="title">
                        <i :class="item.iconCls"></i>
                        <span slot="title">{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="term in item.children" :key="term.name" :index="term.path" :class="$route.path===term.path?'is-active':''"  @click="goPath(term)">
                        <i :class="term.iconCls"></i>
                        <span slot="title">{{term.name}}</span>
                    </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else-if="item.leaf" :index="item.path" :key="item.name"
                                :class="$route.path===item.path?'is-active':''" v-show="item.menuShow" @click="goPath(item)">
                        <i :class="item.iconCls"></i>
                        <span slot="title">{{item.name}}</span>
                    </el-menu-item>
                </template>
            </template>
        </template>
    </el-menu>
</aside>
</template>
<script>
  export default {
    name: 'leftNav',
    data() {
      return {
        collapsed: false,
        nav_name:'',
        cur_path:''
      };
    },
    created(){
        let thisPath = JSON.parse(localStorage.getItem("nav_name"))
        this.nav_name = thisPath
    },
    methods: {
        //跳转
        goPath(url){
            this.nav_name = url.path
            this.$router.push(url.path);
        },
        // 左侧导航栏根据当前路径默认打开子菜单（如果当前是二级菜单，则父级子菜单默认打开）
        defaultLeftNavOpened () {
            this.cur_path = this.$route.path;
            let routers = this.$router.options.routes;
            let subMenuIndex = '', needOpenSubmenu = false;
            for (let i = 0; i < routers.length; i++) {
            let children = routers[i].children;
            if(children){
                for (let j = 0; j < children.length; j++) {
                if(children[j].path === this.cur_path) {
                    break;
                }
                // 如果该菜单下还有子菜单
                if(children[j].children && !children[j].leaf) {
                    let grandChildren = children[j].children;
                    for(let z=0; z<grandChildren.length; z++) {
                    if(grandChildren[z].path === this.cur_path) {
                        subMenuIndex = j;
                        needOpenSubmenu = true;
                        break;
                    }
                    }
                }
                }
            }
            }
        },
        
    },
    watch: {
        '$route': function(to, from){ // 路由改变时执行
            this.nav_name = JSON.parse(localStorage.getItem("nav_name"))
            this.defaultLeftNavOpened();
        },
        '$store.state.collapsed': function (collapsed) {
          this.collapsed = !collapsed
        },
    },
    mounted() {
       this.defaultLeftNavOpened();
    },
  }
</script>
<style scoped>
.el-menu{
    border-right:0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.menu-toggle i{
    font-size: 20px;
}
.el-submenu .el-menu-item {
    padding: 0px !important;
    padding-left: 45px !important;
}
</style>

home

<template>
  <el-container class="home">
    <el-header class="header-top">
      <el-row type="flex" justify="space-between" align="middle" :gutter="4">
        <el-col :span="24">
            <p class="title">系统平台模板</p>
            <topMenu class="topbar-title" />
            <div style="margin-top:10px;width: 12%;float: right;">
              <div class="topbar-account topbar-btn">
              <el-dropdown trigger="click">
                <div class="el-dropdown-link userinfo-inner">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  <span>用户名</span>
                  <i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >
                    <div @click="jumpTo"><span style="color: #555;font-size: 14px;">个人资料</span></div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div @click="jumpTo"><span style="color: #555;font-size: 14px;">修改密码</span></div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div @click="jumpTo"><span style="color: #555;font-size: 14px;">设置</span></div>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            </div>
        </el-col>
      </el-row>
    </el-header>
    <el-row  :class="collapsed ? 'showleftContainer' : 'noShowLeft'">
      <el-col :span="24" class="main">
      <!--左侧导航-->
      <!--展开折叠开关-->
        <div class="menu-toggle" @click.prevent="collapse">
          <i class="iconfont icon-zhankai" v-show="!collapsed" title="展开"></i>
          <i class="iconfont icon-shouqi" size="small" v-show="collapsed" title="收起"></i>
        </div>
        <leftNav></leftNav>
      </el-col>
    </el-row>
    <el-main  :class="collapsed ? 'contain-all-L' : 'contain-all-R'">
        <router-view />
    </el-main>
  </el-container>
  
</template>
<script>
import topMenu from "./top-menu";
import leftNav from "./leftNav";
export default {
  name: "home",
  data() {
    return {
      gotHistory:'',
      collapsed: this.$store.state.collapsed,
    };
  },
  components: {
    topMenu,
    leftNav
  },
  methods: {
    //用户名个人中心
    jumpTo(){

    },
    logout(){

    },
    //折叠导航栏
    collapse: function () {
        this.collapsed = !this.collapsed;
        this.$store.state.collapsed = this.collapsed;
    },
    tabName(value){
        this.gotHistory = value
    }

  },
  //刷新页面时候加载该页面数据
  created() {
    this.gotHistory = JSON.parse(localStorage.getItem("chooseTabs"))
    this.tabName(this.gotHistory)
  },
  watch: {
          '$route': function(to, from){ // 路由改变时执行
              this.tabName(to.path)
          }
        }
};
</script>
<style lang="less" scoped>
@import "../assets/css/reset.css";
.home {
  height: 100%;
  .title {
    line-height: 60px;
    font-weight: 700;
    font-size: 18px;
    height: 60px;
    float: left;
    width: 220px;
    text-align: center;
  }
  .topbar-title{
    width:50%;
    float: left;
  }
  .header-top {
    background-color: #3E3D68;
    color: #fff;
    text-align: center;
    height: 10%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
  }
  .leftContainer{
    float: left;
    position: fixed;
    left: 0;
    top: 60px;
    padding: 10px;
    width: 200px;
    height: 100%;
    z-index: 1025;
    // background: rgb(231, 109, 109);
  }
  .showleftContainer{
    float: left;
    position: fixed;
    left: 0;
    top: 60px;
    padding: 10px;
    margin:10px;
    width: 220px;
    height: 100%;
    z-index: 1025;
    background: #fff;
  }
  .noShowLeft{
    float: left;
    position: fixed;
    left: 0;
    top: 60px;
    margin:10px;
    padding: 10px;
    width: 80px;
    height: 100%;
    z-index: 1025;
    background:#fff;
    overflow: hidden;
  }
  .contain-all{
    position: absolute;
    left: 210px;
    top: 60px;
    padding: 10px;
    /* padding-bottom: 20px; */
    width: calc(100% - 210px);
    height: calc(100% - 60px);
    box-sizing: border-box;
    overflow: hidden;
  }
  .contain-all-L{
    // position: absolute;
    // left: 230px;
    // top: 60px;
    // padding: 10px;
    // width: calc(100% - 230px);
    // height: calc(100% - 60px);
    // box-sizing: border-box;
    float: right;
    position: fixed;
    left: 230px;
    top: 60px;
    margin: 10px;
    width: calc(100% - 250px);
    height: calc(100% - 80px);
    z-index: 1025;
    background: #fff;
  }
  .contain-all-R{
    // position: absolute;
    // left: 90px;
    // top: 60px;
    // padding: 10px;
    // width: calc(100% - 90px);
    // height: calc(100% - 60px);
    // box-sizing: border-box;
    float: right;
    position: fixed;
    left: 90px;
    top: 60px;
    margin: 10px;
    width: calc(100% - 110px);
    height: calc(100% - 80px);
    z-index: 1025;
    background: #fff;
  }
  .menu-toggle i{
      font-size: 20px;
      color: #3E3D68;
  }
  .el-avatar{
    float: left;
  }
  .userinfo-inner span{
    color:#fff;
    font-size: 16px;
    line-height: 40px;
    margin-left: 10px;
  }
  i.el-icon-caret-bottom{
    color: #fff;
  }
}
</style>

4、路由定义
router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home.vue";
import TopNav from "./views/top-menu";
import LeftNav from "./views/leftNav";
import list from "./views/firstCount/list";
import charts from "./views/firstCount/charts";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
    type: 'list',
    redirect: '/list',
    children:[
      {
        path: '/list',
        type: 'list',
        name: '列表',
        component: list,
        menuShow: true,
        iconCls: 'el-icon-menu',
        children: [
          {
            path: '/list',
            type: 'list',
            name: '列表',
            components: {
              default: list,
              top: TopNav,
              aside: LeftNav
            },
            leaf: true, // 只有一个节点
            menuShow: true,
          }
        ]
      },
      {
        path: '/list/charts',
        type: 'list',
        name: '图表',
        components: {
          default: charts,
          top: TopNav,
          aside: LeftNav
        },
        menuShow: true,
        leaf: true, 
        iconCls: 'el-icon-menu',
      },
    ]
  },
];

const router = new VueRouter({
  routes
});

export default router;

store.js

export default new Vuex.Store({
  state: {
    page1:1,
    collapsed: true,
    leftNavState: 'home'
  },
  })