=> 通过 commponent 创建动态组件

:is 属性判断加载的组件 ，通过 keep-alive 实现组件内的数据被缓存
   <template>
    keep-alive
        component(:is="who")
    //   通过 @click="who='home'" 判断加载的组件
    ul 
     li(@click="who='home'") 首页
     li(@click="who='list'") 列表页
     li(@click="who='cart'") 购物车页面
   </template>

引入组件

<script>
   import home from "./keep-alive/alive.vue"
   import list from "./keep-alive/index.vue"
   import cart from "./keep-alive/keep-alive.vue"
   export default {
    components: {
      home,
      list,
      cart
 },
 data() {
   return {
     who: 'home'
  }
  }
}
</script>