

<template>
    <div id="container">
      <div>
        <Header></Header>
        <div style="background: #ffffff;" class="home_menu">
            <Menu></Menu>
        </div>
      </div>
      <main>
        <router-view v-slot="{ Component }">
          <keep-alive :exclude="['Home']">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </main>
    </div>
  </template>
  <script setup lang="ts">
    import Header from '../components/Header.vue';
    import { onMounted, watch } from 'vue';
    import { useRouter, useRoute } from 'vue-router'
    import Menu from '@/views/components/Menu.vue'
    defineOptions({
      name: "Home"
    })
    const router = useRouter();
    const route = useRoute();
    watch(route,(newVal)=>{
      if(newVal.path == '/home'){
        router.push('/graphite')
      }
    },{ immediate: true, deep: true })
  </script>
  <style>
    .home_menu{
      background: rgb(255, 255, 255);
      position: absolute;
      left: 84%;
      height: 1724px;
      width: 450px;

    }
  </style>