SEEC-Portal-Front/layouts/person.vue

<template>
  <div>
    <navi></navi>
    <div class="person-container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo side-bar"
        @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-user"></i>
          <span slot="title">基本信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span slot="title">身份认证</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-data-line"></i>
          <span slot="title">学习数据</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-reading"></i>
          <span slot="title">我的课程</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-document"></i>
          <span slot="title">当前任务</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-s-order"></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
      </el-menu>
      <el-card class="main-card">
        <nuxt />
      </el-card>
    </div>
    <foot></foot>
  </div>
</template>

<script>
  import Navi from "~/components/Navi";
  import Foot from "~/components/Foot";

  export default{
    components: {Navi, Foot},
    data(){
      return{
        activeIndex: "1"
      }
    },
    methods: {
      handleSelect(index){
        const routes=['/person/info', '/person/identification', '/person/statistics', '/person/orders'];
        this.$router.push(routes[index-1]);
      }
    },
    mounted(){
      const routes=['/person/info', '/person/identification', '/person/statistics', '/person/orders'];
      this.activeIndex = (1 + routes.indexOf(this.$router.app._route.path)) + "";
    }
  }
</script>

<style lang="scss" scoped>
  @import '~/assets/css/person.scss';
</style>