解决页脚先出现的问题

src/App.vue

@@ -1,21 +1,38 @@
 <script setup>
-import Footer from './components/Footer.vue'
+import { ref } from 'vue';
-import Toolbar from './components/Toolbar.vue'
+import { useRouter } from 'vue-router';
+import Footer from './components/Footer.vue';
+import Toolbar from './components/Toolbar.vue';
+
+const router = useRouter();
+const isContentLoaded = ref(false);
+
+// 等待路由完全就绪（所有初始导航和异步组件加载完毕）
+router.isReady().then(() => {
+  isContentLoaded.value = true;
+});
 </script>
 
 <template>
-<div id="contentPane">
+  <div id="contentPane">
     <Toolbar></Toolbar>
     <div v-if="$route.path === '/ContactUs'">
       <router-view/>
+      <!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载，则也加上 v-if -->
+      <!--
+      <div id="footer" v-if="isContentLoaded">
+        <Footer></Footer>
+      </div>
+      -->
     </div>
     <div v-else id="defaultcontainer">
       <div id="content"><router-view/></div>
-    <div id="footer">
+      <!-- 仅当 isContentLoaded 为 true 时渲染 Footer -->
+      <div id="footer" v-if="isContentLoaded">
         <Footer></Footer>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -31,18 +48,19 @@ import Toolbar from './components/Toolbar.vue'
 #defaultcontainer{
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100vh; /* 确保在内容不足时，Footer也能被推到底部 */
 }
 #content{
   display: flex;
   position: relative;
-  flex:1;
+  flex:1; /* 关键：让内容区占据所有可用空间，将Footer推到底部 */
   width: 100%;
-  min-height: 100%;
+  /* min-height: 100%; 这行可能不再需要，因为父容器已经是flex并且此元素flex:1 */
 }
 
 #footer{
-  margin-top: 0px;
+  margin-top: 0px; /* 或者 auto，取决于具体设计 */
+  /* flex-shrink: 0; // 防止Footer在空间不足时被压缩，如果需要的话 */
 }
 
 @include media-breakpoint-between(xs, md) {