左側菜單和頁面左右布局，菜單折疊內容頁面自適應

1.左側菜單div樣式

.leftMenu{
  position :fixed;
  top: 60px;
  left: 0;
  bottom: 0;
　z-index: 10;
  height: 100%;
  text-align: center;
  background: #201f20;
}

2.左側菜單寬度變化div寬度自適應

<div class="leftMenu" :style="{'margin-left':(isCollapse ? '64':'200' + 'px')}"></div>

3.右側內容區域的div樣式

.containerDiv{
  height: 100%;
  display: flex;
  flex: 1;
  padding: 20px;
}

4.菜單路由

        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title" @click="routerPage('home')">主頁</span> 
        </el-menu-item>
動態數據：
        <el-menu-item v-for="(item,index) in menuList" :key="index" :index="index+1">
          <i class="el-icon-menu"></i>
          <span slot="title" @click="routerPage(item.routerName)">主頁</span> 
        </el-menu-item>

5.路由跳轉

    routerPage(name){
      // 檢查路由，是否跳轉
      let histroyRouter = '/' + name
      if(histroyRouter!==this.$route.path && (histroyRouter!==this.histroyRouter)){
        this.histroyRouter = histroyRouter
        this.$router.push({path: histroyRouter})
      }
    }