<template>
  <div class="mark-set">
    <div class="page-navs">
      <Button
        :type="curNav.name === nav.name ? 'primary' : 'default'"
        v-for="(nav, index) in navs"
        :key="index"
        @click="switchNav(nav)"
        >{{ nav.title }}</Button
      >
    </div>

    <router-view />
  </div>
</template>

<script>
import { markSetNavs } from "@/routers/main";
import menuMixins from "@/components/homeMenuMixins";

export default {
  name: "mark-set",
  mixins: [menuMixins],
  data() {
    return {
      navs: markSetNavs,
      curNav: {}
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.actCurNav(val);
      }
    }
  },
  mounted() {
    this.actCurNav(this.$route);
  }
};
</script>
