Vue.js 动态组件案例：实现 Home、Canteen 和 Company 页面切换

<template>
  <div>
    <nav>
      <ul>
        <li @click="currentComponent='home'">Home</li>
        <li @click="currentComponent='canteen'">Canteen</li>
        <li @click="currentComponent='company'">Company</li>
      </ul>
    </nav>
    <component :is="currentComponent"></component>
  </div>
</template>
<script>
import Home from './Home.vue'
import Canteen from './Canteen.vue'
import Company from './Company.vue'

export default {
  data() {
    return {
      currentComponent: 'home'
    }
  },
  components: {
    Home,
    Canteen,
    Company
  }
}
</script>