vue点击菜单不跳转页面只是切换主体部分内容即切换组件

<template>
  <div>
    <div class="nav">
      <el-row :gutter="20">
        <el-col :span="3" @click.native="menuChange('Home')"  ><div class="grid-content bg-purple">首页</div></el-col>
        <el-col :span="3" @click.native="menuChange('test')"><div class="grid-content bg-purple">测试</div></el-col>
      </el-row>
    </div>
    <div :is="currentView"></div>
  </div>
</template>

<script>
import Home from '@/components/Home'
import test from '@/components/test'
export default {
  name: 'menuChange',
  components:{
    Home,
    test
  },
  data () {
    return {
      currentView:'Home'
    }
  },
  methods:{
    menuChange(menu) {
      this.currentView = menu;
      console.log(this.currentView);
    }
  }
}
</script>