mvc中使用elementui的tabs载入子页面

在MVC（Model-Controller）架构中，利用Element UI的Tabs组件动态加载子页面通常涉及到以下几个步骤：

1. **模型(Model)部分**：创建一个数据模型，包含子页面的名称、路径等信息，当需要切换tab时，提供相关的子页面配置。

const tabsData = [
  { name: '子页面1', path: '/page1' },
  { name: '子页面2', path: '/page2' }
];

2. **视图(View)部分**：在Vue组件中，使用Element UI的`el-tabs`组件，并监听它的`@change`事件来处理tab的切换。每当用户选择一个新tab，通过`this.$router.push`或者`this.$route.push`来导航到对应的子页面。

<template>
  <div>
    <el-tabs v-model="activeName" @change="handleChange">
      <el-tab-pane v-for="(item, index) in tabsData" :key="index" :label="item.name">
        <router-view :name="item.path"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '',
      tabsData
    };
  },
  methods: {
    handleChange(tabName) {
      this.$router.push({ name: tabName });
      // 或者 使用 this.$route.replace(tabName);
    }
  }
};
</script>

这里我们假设已经配置了Vue Router来进行路由管理。

3. **控制器(Controller)部分**：确保Vue实例已经绑定了`$router`属性，并且子页面（例如`Page1.vue`或`Page2.vue`)通过`<router-view>`标签进行了展示。每个子页面应该是单个功能模块，负责处理它们各自的数据操作。