menduner/src/layout/index.vue

<template>
  <div class="parent" @click="layoutClick">
    <NavBar class="headers"></NavBar>
    <div class="content">
      <router-view :key="router.currentRoute.value.path + Math.random()"></router-view>
      <!-- <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="router.currentRoute.value.path" v-if="router.currentRoute.value.meta?.keepAlive"/>
        </keep-alive>
        <component :is="Component" :key="router.currentRoute.value.path" v-if="!router.currentRoute.value.meta?.keepAlive"/>
      </router-view>  -->
    </div>
    <Footers v-if="footerWhiteList.indexOf(router.currentRoute.value.path) === -1" :class="{'mt-10': !router.currentRoute.value.path.includes('/mall')}"></Footers>
    <Slider v-if="whiteList.indexOf(router.currentRoute.value.path) === -1" class="slider"></Slider>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-layout-index' })
import { onMounted, watch } from 'vue'
import NavBar from './personal/navBar.vue'
import Footers from './personal/footer.vue'
import Slider from './personal/slider.vue'
import { useSharedState } from '@/store/sharedState'
import { useRouter, useRoute } from 'vue-router'
import { useMallStore } from '@/store/mall'
import { useUserStore } from '@/store/user'

// 不展示侧边栏名单
const whiteList = ['/login', '/privacyPolicy', '/userAgreement', '/register', '/recruit/personal/advertisement/introduce']
// 不展示页脚白名单
const footerWhiteList = [
  '/recruit/personal/message',
  '/recruit/personal/advertisement/introduce',
  '/about',
  '/headhunting',
  '/headhunting/service',
  '/headhunting/service/details',
  '/recruit/personal/resume/analysis',
  '/mall/pointExchange/records'
]
const route = useRoute()
const router = useRouter()
const user = useUserStore()
const sharedState = useSharedState()

const layoutClick = () => {
  sharedState.increment()
}

onMounted(async () => {
  await useMallStore().getMallDiyTemplate()
})

watch(
  () => route.matched,
  async () => {
    await user.getUserAccountInfo()
  },
  { immediate: true },
  { deep: true }
)
</script>

<style lang="scss" scoped>
.parent {
  background-color: var(--default-bgc);
  position: relative;
}
.headers {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 999;
}
.slider {
  position: fixed;
  bottom: 50%;
  right: 24px;
  translate: 0 50%;
  z-index: 999;
}
.content {
  min-height: calc(100vh - (48px + 225px));
  margin-top: 50px;
}
</style>