左侧菜单和页面左右布局，菜单折叠内容页面自适应

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})
      }
    }

左侧菜单和页面左右布局，菜单折叠内容页面自适应

相关推荐