OpenPlatForm/pages/domain/control.vue

<template>
  <div class="control">
    <div class="navigation-box">
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="defaultActive"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-menu-item index="/domain/control/myApp">
          <span class="svg-box">
            <i class="iconfont MinIconmy" style="color: #1890ff"></i>
          </span>
          <span slot="title">我的应用</span>
        </el-menu-item>

        <el-submenu index="/domain/control/information">
          <template slot="title">
            <span class="svg-box">
              <i class="iconfont MinIconapp" style="color: #1890ff"></i>
            </span>
            <span>用户中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/information">账号信息</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/registration">实名认证</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/password">修改密码</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>

    <div class="content-box">
      <nuxt-child keep-alive />
    </div>
  </div>
</template>

<script>
export default {
  asyncData({ route }) {
    return {
      defaultActive: route.path,
    };
  },
  data(){
      return {
          defaultActive : '/domain/control/myApp'
      }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      });
    },
    handleOpen: function () {},
    handleClose: function () {},
  },
};
</script>


<style lang="scss" scoped>
.control {
  width: 100%;
  display: flex;
  padding-bottom: 40px;
  flex-wrap: wrap;
  .navigation-box {
    width: 250px;
    height: 837px;
    background: #fff;
    margin-right: 20px;
    border-radius: 14px;
    overflow: hidden;
  }

  .content-box {
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
  }
}

.svg-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: 0px;
}
</style>