web-live/src/views/admin/live/train.vue

<template>
  <div id="train">
    <admin-frame>
      <template #menu>
        <admin-meun :list="menus" title="个人中心"></admin-meun>
      </template>
      <component :is="component"></component>
    </admin-frame>
  </div>
</template>

<script>
import adminFrame from '../model/frame.vue';
import adminMeun from '../model/menu.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'train',
  props: {},
  components: {
    adminFrame,
    adminMeun,
    tBase: () => import('./train/base.vue'),
    tVideo: () => import('./train/video.vue'),
    tUser: () => import('./train/user.vue'),
  },
  data: function() {
    return {
      menus: [
        { num: '1', title: '基本信息', icon: 'el-icon-notebook-1', component: 'tBase' },
        { num: '2', title: '视频管理', icon: 'el-icon-video-camera-solid', component: 'tVideo' },
        { num: '3', title: '用户管理', icon: 'el-icon-user', component: 'tUser' },
        { num: '4', title: '进入频道', icon: 'el-icon-refresh', component: () => this.$router.push({ path: '/trainLive/index', query: { id: this.user.id } }) },
      ],
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    num() {
      return this.$route.query.num || '1';
    },
    component() {
      let component = 'tBase';
      const res = this.menus.find(f => f.num === this.num);
      if (res && _.isFunction(res)) {
        res();
      } else if (res) {
        component = _.get(res, 'component', 'tBase');
      }
      return component;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>