Home.vue中el-menu前增加

javascript">    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->
      <!--侧边栏折叠与展开-->
      <el-aside :width="isCollapse ? '64px' : '200px'">
      	<!--点击折叠/展开-->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!--侧边栏菜单区域-->
        <!--unique-opened：	是否只保持一个子菜单的展开-->
        <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
        >

data()中添加： isCollapse:false

javascript">   data() {
      return {
        //左侧菜单数据
        menulist: [],
        iconsObj: {
          '125': 'el-icon-user-solid',
          '103': 'el-icon-bank-card',
          '101': 'el-icon-s-shop',
          '102': 'el-icon-s-order',
          '145': 'el-icon-s-data'
        },
        isCollapse:false
      }

    },

methods中添加：

javascript">   methods: {
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      // 获取所有的菜单导航,async和await
      async getMenuList() {
        const { data: res } = await this.$http.get('menus')
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.menulist = res.data
        console.log(res)
        console.log(this.menulist)
      },
      //点击按钮切换菜单展示/折叠
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }

组件样式中添加：

javascript"> .toggle-button {
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    /*文本排列格式*/
    text-align: center;
    /* 指定字符之间的额外间隙*/
    letter-spacing: 0.2em;
    /*鼠标经过格式*/
    cursor: pointer;
  }

点击折叠后：