layout.vue 1.09 KB
<template>
    <el-container>
        <!--<el-header id="app-header">
            <Header @arrowTo="arrowTo"></Header>
        </el-header>-->
        <el-main id="app-main">
            <router-view v-slot="{ Component  }">
                <component ref="childArrowPath" :is="Component "></component>
            </router-view>
        </el-main>
        <el-footer id="app-footer" v-if="isShowFooter">
            <Footer></Footer>
        </el-footer>
        <div v-show="false">{{route.path}}</div>
    </el-container>
</template>
<script setup lang="ts">
    import router from "../router/index";

    const route = useRoute();
    let isShowFooter = ref(true)
    let pathList = reactive(['/','/product','/mine'])
    let childArrowPath = ref(null)
    let arrowPath = ref("")

    watchEffect(() => {
        isShowFooter = false
        if(pathList.includes(route.path)) {
            isShowFooter = true
        }

        nextTick(()=>{
            arrowPath = childArrowPath.value.arrowPath
        })
    })

    let arrowTo = () => {
        router.push(arrowPath)
    }
</script>

<style scoped>
</style>