（二）【左侧栏 模块】vue管理后台项目的实现，vue + vue+router + axios + elementUI

今天这个模块实现的是【左侧栏】和【退出登录】的功能：

左侧栏的数据，我是存放在一个文件中，便于修改：config/menuConfig

/**
 * 页面上的一些固定的数据
 * 
 * @param   title标题
 * @param  icon图标
 * @param  id唯一标识
 * @param  path跳转路由路径
 * @param  children二级菜单栏
 * 
 */
const menuList = [{
    title: '用户管理',
    icon: 'el-icon-user',
    id: 100,
    path: '100',
    children: [{
      title: '用户列表',
      icon: 'el-icon-user',
      id: 101,
      path: '/userslist'
    }]
  },
  {
    title: '权限管理',
    icon: 'el-icon-unlock',
    id: 200,
    path: '200',
    children: [{
        title: '角色列表',
        icon: 'el-icon-notebook-2',
        id: 201,
        path: '/roleslist'
      },
      {
        title: '权限列表',
        icon: 'el-icon-key',
        id: 202,
        path: '/rightslist'
      }
    ]
  },
  {
    title: '商品管理',
    icon: 'el-icon-box',
    id: 300,
    path: '300',
    children: [{
        title: '商品列表',
        icon: 'el-icon-suitcase-1',
        id: 301,
        path: '/productslist'
      },
      {
        title: '分类参数',
        icon: 'el-icon-receiving',
        id: 302,
        path: '/userslist1'
      },
      {
        title: '商品分类',
        icon: 'el-icon-collection',
        id: 303,
        path: '/userslist2'
      }
    ]
  },
  {
    title: '订单管理',
    icon: 'el-icon-document',
    id: 400,
    path: '/orderslist',
    children: []
  },
  {
    title: '数据统计',
    icon: 'el-icon-postcard',
    id: 500,
    path: '/statislist',
    children: []
  }
]

export default menuList;

【左侧栏】和【退出】

描述：

（1）左侧栏通过数据渲染出来的。（双重for循环遍历menuList数组）

（2）选中哪个，页面刷新的时候，还是会显示的。（将选中的栏的路由存入session中，通过default-active来显示）

（3）点击左侧栏切换路由的时候，会出现这个问题 Navigating to current location ("/userslist") is not allowed。解决办法详见

（4）左侧栏的折叠效果。（通过collapse来控制）

（5）左侧栏开启路由切换模式。（通过router来控制）

（6）退出登录。（清除token，跳回登录页面）

<template>
  <div id="home">
    <el-container class="home-container">
      <el-header>
        <div class="header_left">
          <img src="../assets/image/avator.jpeg" alt />
          <span>后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse?'auto':'200px'">
          <div class="toggle-btn" @click="toToggle">
            <i class="el-icon-notebook-1"></i>切换
          </div>
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#409EFF"
            :unique-opened='true'
            :collapse = 'isCollapse'
            :collapse-transition = 'false'
            :router = 'true'
            :default-active="activePath"
          >

            <el-submenu :index="item.path" v-for="(item,idx) in menuList" :key="idx"> 
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
              </template>
              <el-menu-item  :index="subItem.path" v-for="(subItem,subIdx) in item.children" :key="subIdx" @click="activePathFn(subItem.path)">
                <i :class="subItem.icon"></i>
                <span slot="title">{{subItem.title}}</span>
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { DURATION } from '../utils/constants'
import menuList from '../config/menuConfig'
var that;
export default {
  data() {
    return {
      msg: '',
      menuList:menuList,   // menuConfig文件返回的
      isCollapse:false,
      activePath:''
    }
  },
  created(){
    console.log(menuList);
    this.activePath = window.sessionStorage.getItem('activePath');
  },
  methods: {
    // 退出登录
    logout() {
      that = this
      that
        .$confirm('确定要退出?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.$message({
            type: 'success',
            duration: DURATION,
            message: '退出成功!'
          })
          window.sessionStorage.clear()
          that.$router.push('/login')
        })
        .catch(() => {
          that.$message({
            type: 'error',
            duration: DURATION,
            message: '已取消退出'
          })
        })
    },
    // 展开折叠
    toToggle(){
      this.isCollapse = !this.isCollapse;
    },
    // 当前激活的菜单
    activePathFn(path){
      console.log(path)
      window.sessionStorage.setItem('activePath',path);
    }
  }
}
</script>
<style scoped lang="less">
#home {
  height: 100%;
}
.home-container {
  height: 100%;
  .el-header {
    background: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_left {
      display: flex;
      align-items: center;
      color: #ffffff;
      span {
        padding-left: 15px;
      }
      img {
        width: 40px;
      }
    }
  }
  .el-aside {
    background: #333744;
    .toggle-btn{
      background: #ffffff;
      text-align: center;
      padding:10px 0;
    }
  }
  .el-main {
    background: #efefef;
  }
}
</style>

ღ( ´･ᴗ･` )❤暂完。