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

一时失言乱红尘 2023-06-16 15:51 77阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

左侧栏的数据，我是存放在一个文件中，便于修改：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。[解决办法详见][Link 1]

（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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127015912811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/Miss_liangrm/article/details/103262817