Vue.js 路由跳转页面白屏怎么办？新手必看的 SPA 单页面应用入门教程-Vue.js-PHP中文网

vue路由跳转白屏主因是router-view缺失、组件未正确导出或路径不匹配；需依次检查app.vue中是否包含、路由组件是否default导出、url与path配置是否完全一致。

vue.js 路由跳转页面白屏怎么办？新手必看的 spa 单页面应用入门教程

Vue.js 路由跳转后白屏，多数不是代码写错了，而是关键环节没配对——比如路由组件没导出、路由路径没匹配、或 App.vue 根组件漏了 <router-view></router-view>。别急着查语法，先确认这三处是否到位。

SPA 的页面内容全靠 <router-view></router-view> 插槽动态加载组件。如果白屏，第一反应是它是否被写进了根组件（通常是 App.vue）的模板里：

确保 App.vue 的 <template></template> 中有且只有一个 <router-view></router-view>（不要写成 <router-view></router-view> 或拼错）
如果用了布局组件（如 <layout></layout>），要确认 <router-view></router-view> 在最终被渲染的层级中，而不是被意外包裹在 v-if="false" 或未激活的插槽里
可在 <router-view></router-view> 上加个临时样式（如 style="border: 1px solid red;"）看是否渲染出空白区域，快速判断是否“挂载了但没内容”

Vue Router 依赖组件能被正确 import 和实例化。常见坑在于导出不一致：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

使用 defineComponent 或 export default { ... } 的单文件组件，必须用 export default 导出，不能只写 export const xxx = {...}
如果路由配置里写了 component: () => import('./views/Home.vue')，要确保该路径真实存在、文件名大小写准确（尤其在 Linux/macOS 环境下区分大小写）
尝试把异步导入改成同步导入（component: () => import('./views/Home.vue') → component: () => import('./views/Home.vue').then(m => m.default)），排除打包/解析异常

白屏常因“地址变了，但没一个路由规则能接住”。排查时重点关注：

浏览器地址栏 URL 是否和 router/index.js 中定义的 path 完全一致（含开头的 /、结尾是否允许 trailing slash）
是否存在重定向（redirect）或别名（alias）导致实际匹配路径偏离预期
在路由配置中临时加个通配符兜底页：{ path: '/:catchAll(.*)', component: () => import('./views/NotFound.vue') }，若跳转后显示 404 页面，说明是路径不匹配；若仍白屏，则问题在 router-view 或组件本身

Vue 启动或组件加载失败时，可能不抛红字但中断渲染流程：

打开浏览器开发者工具，切换到 Console 面板，刷新页面，留意黄色警告（如 “Failed to resolve component”）或红色错误（如 “Cannot read property ‘xxx’ of undefined”）
特别注意组件内部 setup() 或 data() 中是否引用了未定义的响应式变量、未安装的插件（如 useRouter 在非 setup 或未引入时调用）
可临时在目标组件的 mounted() 或 onMounted() 中加 console.log('loaded')，确认组件是否执行到生命周期钩子

不复杂但容易忽略——白屏本质是“内容没进来”，顺着渲染链路倒查：URL → 路由匹配 → 组件加载 → 模板挂载 → 内容渲染，一环卡住就停在白页。动手前，先看控制台、再盯 router-view、最后核对组件导出，90% 的情况当场解决。