Vue切换Tab动态渲染组件

使用<component :is="组件名"></component>

结合Element-UI的导航菜单 :

• UI组件

  • el-menu-item里的index写对应的组件名
  • 点击事件@select="handleSelect"

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="Home">首页</el-menu-item>
      <el-menu-item index="About">关于我们</el-menu-item>
  </el-menu>
  <component :is="activeIndex"></component>
  

• 在点击事件里动态设置组件名

  handleSelect(index) {
     this.activeIndex = index
  }
  

完整代码

	<template>
	  <div id="app">
	    <!-- 导航栏 -->
	    <el-row class="home_nav" type="flex" justify="flex-start" align="middle">
	      <el-col :span="2" :offset="4">
	        <div>LOGO</div>
	      </el-col>
	      <el-col :span="12">
	        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
	          <el-menu-item index="Home">首页</el-menu-item>
	          <el-menu-item index="About">关于我们</el-menu-item>
	        </el-menu>
	      </el-col>
	    </el-row>
	    <component :is="activeIndex"></component>
	  </div>
	</template>
	
	<script>
	import Home from './components/Home.vue'
	import About from './components/About.vue'
	
	export default {
	  name: 'app',
	  components: {
	    Home,
	    About
	  },
	  data(){
	    return {
	      activeIndex: "Home"
	    }
	  },
	  methods: {
	    handleSelect(index) {
	      this.activeIndex = index
	    }
	  }
	}
	</script>
	<style>
	</style>