vue element menu结合动态组件使用

如何结合element 的menu  点击不同的菜单选项，在同一个页面里渲染不同内容呢？

关键词：使用动态组件在同一个页面里渲染不同组件

<component :is="currentView"></component>

结合element上代码

html代码

<el-menu
          default-active="1"
          class="menu"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">菜单1</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span slot="title">菜单2</span>
          </el-menu-item>
        </el-menu>
      <el-container style="border-left:1px solid #eee; position:relative; z-index:999;">
        <div class="collapse" @click="toggleClick" :class="{'is-active':isCollapse}"><i class="el-icon-arrow-left"></i></div>
        <!--内容区域-->
        <el-main class="tb-com">
          <!--动态组件-->
          <component :is="currentView"></component>
        </el-main>
      </el-container>

js部分代码

export default {
  components: { component1, component2 },
  data() {
    return {
      currentView: 'component1'
    }
  }
}