h5-editor/client/pages/home/index.vue

<template>
  <div class="page-home">
    <div class="home-side-bar">
      <el-menu default-active="/page-list" router>
        <el-menu-item index="/home/page-list">
          <i class="el-icon-mobile"></i>
          <span slot="title">我的作品</span>
        </el-menu-item>
<!--        <el-menu-item index="/home/my-template">-->
<!--          <i class="el-icon-document"></i>-->
<!--          <span slot="title">我的模板</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/home/page-data">-->
<!--          <i class="el-icon-menu"></i>-->
<!--          <span slot="title">我的数据</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/home/template-list">-->
<!--          <i class="el-icon-s-shop"></i>-->
<!--          <span slot="title">创意模板</span>-->
<!--        </el-menu-item>-->
      </el-menu>
    </div>
    <div class="clearfix my-page-list">
      <router-view class="sub-page"/>
    </div>
  </div>
</template>

<script>
import { Menu, MenuItem } from 'element-ui'

export default {
 components: {
   [Menu.name]: Menu,
   [MenuItem.name]: MenuItem,
 }
}
</script>

<style lang="scss" scoped>
  .page-home {
    display: flex;
    width: 100%;
    height: 100%;
    background: rgb(240, 243, 244);
    .home-side-bar{
      width: 200px;
      background-color: #fff;
      border-right: 1px solid #e6ebed;
      padding-top: 8px;
      z-index: 2;
    }
    .my-page-list{
      flex: 1;
      height: 100%;
      .sub-page{
        height: 100%;
      }
    }
  }
</style>