gerson
2025-02-13 2a4b83c058b9f669e33e96168d7ad25016dafadd
src/App.vue
@@ -1,17 +1,43 @@
<template>
   <div class="h-full bg-gray-50 flex flex-col">
      <AppHeader class="flex-0" />
      <div class="flex-auto !overflow-y-auto bg-[#f4f4f4]">
         <div class="w-[63%] mx-auto">
            <router-view></router-view>
      <template v-if="!isLoginPage">
         <AppHeader class="flex-0" />
         <div class="flex-auto !overflow-y-auto bg-[#f4f4f4]" ref="containerRef">
            <div class="w-[63%] mx-auto">
               <router-view></router-view>
            </div>
            <AppFooter></AppFooter>
         </div>
      </div>
      </template>
      <template v-else>
         <router-view></router-view>
      </template>
   </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import AppFooter from './components/AppFooter.vue';
import AppHeader from './components/AppHeader.vue';
const route = useRoute();
const containerRef = ref<HTMLDivElement | null>(null);
// 判断是否是登录页面
const isLoginPage = computed(() => {
   return route.path === '/login';
});
// 监听路由变化,滚动到顶部
watch(
   () => route.path,
   () => {
      if (containerRef.value) {
         containerRef.value.scrollTop = 0;
      }
   }
);
</script>
<style>