msyj-admin-local/src/modules/mark/MarkHome.vue

<template>
  <div class="mark-home home">
    <div class="home-header">
      <view-header>
        <h1 slot="logo">{{ curSubject.name }}</h1>
        <div class="home-navs" slot="info">
          <ul>
            <li
              :class="{ act: curNav.name === nav.name }"
              v-for="(nav, index) in navs"
              :key="index"
              @click="switchNav(nav)"
            >
              <span class="nav-item-cont">{{ nav.title }}</span>
            </li>
          </ul>
        </div>
      </view-header>
    </div>

    <div class="home-body">
      <div class="home-main">
        <router-view />

        <view-footer></view-footer>
      </div>
    </div>
  </div>
</template>

<script>
import { navs } from "@/routers/mark";
import menuMixins from "@/components/homeMenuMixins";
import { subjectDetail } from "@/api";

export default {
  name: "mark-home",
  mixins: [menuMixins],
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      navs: [],
      curNav: {},
      curSubject: { name: "素描" }
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.actSubNav();
      }
    }
  },
  mounted() {
    this.buildNavs();
    this.actSubNav();
    this.getSubjectDetail();
  },
  methods: {
    async getSubjectDetail() {
      this.curSubject = await subjectDetail(this.subjectId);
    },
    buildNavs() {
      const user = this.$ls.get("user", {});
      this.navs = navs;
      if (user.role === "ADMIN") {
        this.navs = [{ title: "总览", name: "WorkOverview" }, ...navs];
      }
    },
    actSubNav() {
      const router = this.$route.matched.filter(
        item => item.name !== "Mark"
      )[0];
      this.actCurNav(router);
    }
  }
};
</script>