<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <div id="layout">
        <Header/>
        <component :is="Component"></component>
        <Footer/>
      </div>
    </keep-alive>
  </router-view>
</template>

<script lang="ts" setup>
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import { ref, watch } from 'vue'
import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'

const includeList = ref<string[]>([])
const route = useRoute()

watch(route, (to: RouteLocationNormalizedLoaded) => {
  if (to.meta?.keepAlive && includeList.value.indexOf(to.name as string) === -1) {
    includeList.value.push(to.name as string)
  }
})
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 14px;
}

#layout {
  .container {
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 164px);
  }
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}

.breadcrumb {
  padding: 32px 0;
}
</style>
