Vue路由跳转白屏主因是router-view缺失、组件未正确导出或路径不匹配；需依次检查App.vue中是否包含<router-view>、路由组件是否default导出、URL与path配置是否完全一致。
Vue.js 路由跳转后白屏，多数不是代码写错了，而是关键环节没配对——比如路由组件没导出、路由路径没匹配、或 App.vue 根组件漏了 <router-view>。别急着查语法，先确认这三处是否到位。
检查 router-view 是否正确渲染
SPA 的页面内容全靠 <router-view> 插槽动态加载组件。如果白屏，第一反应是它是否被写进了根组件（通常是 App.vue）的模板里：
- 确保
App.vue的<template>中有且只有一个<router-view>（不要写成<router-view />或拼错） - 如果用了布局组件（如
<Layout>），要确认<router-view>在最终被渲染的层级中，而不是被意外包裹在v-if="false"或未激活的插槽里 - 可在
<router-view>上加个临时样式（如style="border: 1px solid red;"）看是否渲染出空白区域，快速判断是否“挂载了但没内容”
确认路由组件导出方式匹配
Vue Router 依赖组件能被正确 import 和实例化。常见坑在于导出不一致：
- 使用
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)），排除打包/解析异常
验证路由路径与导航是否匹配
白屏常因“地址变了，但没一个路由规则能接住”。排查时重点关注：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
立即学习“前端免费学习笔记（深入）”；
- 浏览器地址栏 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% 的情况当场解决。
