Vue.js 3如何在应用加载时渲染默认视图/路由？

下面是几个实用的解决思路，直接适配你的场景：

1. 预加载/同步引入默认路由组件 #

如果你的默认路由（比如首页）是懒加载方式引入的，浏览器需要额外请求资源，这就是延迟的核心原因。改成同步引入或者添加预加载标记，让浏览器在页面加载阶段就拉取首页组件资源：

修改路由配置： #

// router/index.js
// 方式1：同步引入（最直接）
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home // 不再使用懒加载函数
  },
  // 其他路由可保留懒加载
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

// 方式2：保留懒加载但添加预加载注释（适合不想全同步的场景）
const routes = [
  {
    path: '/',
    name: 'Home',
    // 加webpackPrefetch让浏览器空闲时预加载首页组件
    component: () => import(/* webpackPrefetch: true */ '@/views/Home.vue')
  }
]

2. 用CSS固定页脚位置，从布局层面避免跳动 #

不管组件加载快慢，先通过布局让页脚始终停在页面底部，哪怕路由视图暂时为空：

给你的.wrapper容器添加flex布局样式：

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 占满整个视口高度 */
}

/* 让路由视图区域自动填充页眉和页脚之间的剩余空间 */
#app > router-view {
  flex: 1;
}

这样即使首页组件还没渲染，路由视图区域也会占据足够空间，页脚不会紧贴页眉。

3. 提前初始化路由再挂载应用 #

在main.js里，确保路由实例初始化完成后再挂载Vue应用，避免路由解析滞后：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 等待路由初始导航完成后再挂载应用
router.isReady().then(() => {
  createApp(App).use(router).mount('#app')
})

Vue Router 4+提供的isReady()方法，会等待路由完成初始导航后再执行挂载，确保页面加载时默认路由已经解析完成。

内容的提问来源于stack exchange，提问作者Lucien Dubois