导航到/user/info地址栏路径没毛病接口数据也正常返回可页面就是一片空白——子组件没有渲染出来。这个问题在 Vue 项目里出现的频率相当高典型的嵌套路由配置错误。我写 Vue 这些年光这类问题就排查过几十次自己也踩过也帮同事处理过几乎每次都能归因到固定的几个模式上。这篇就按照我实际的排查习惯来写先根据现象判断问题出在哪一层再列高频配置错误清单然后复盘一次完整的排查过程最后讲几个能加速定位的调试手段顺便把多层嵌套、动态路由、守卫拦截这些组合场景一并说清楚。无论你是刚接触 Vue Router 的新手还是写过一段时间项目的开发者只要遇到过URL 明明正确页面就是不对这种情况这篇应该能帮你省下不少时间。1. 先分清子路由不显示的三种现场别在错误的层面瞎找遇到子路由没有显示我建议你先别急着翻路由表。先抬头看一眼页面到底长什么样把它归到下面三种情形之一再决定从哪里动手。这一步看似简单实际上决定了后续所有排查方向是查路由表、查组件模板还是查导航守卫和兜底规则。我见过不少同事一上来就改children配置改了半天发现问题根本不在路由表里白白浪费时间。这种先分类再定位的思路放到网络排查、后端问题定位上同样成立但它在前端路由排查上尤其容易被忽略因为路由配置太直观了大家都觉得问题一定出在配置文件里。1.1 整个页面白屏URL 变了内容完全没渲染地址栏已经是/user/info页面上却什么都没有父组件和子组件都没出来。这种情况的核心嫌疑是路由表里没有匹配到/user/info对应的记录或者最外层的router-view /从App.vue里消失了。如果路由匹配不上Vue Router 会去找兜底路由没有兜底就什么都不渲染。检查方法很简单先看控制台有没有警告再看App.vue里有没有router-view最后确认路由表里/user这条记录有没有被注释或删除。在实际项目里我遇到过一种挺隐蔽的情况App.vue被某个全局组件包裹这个组件内部自己实现了一个插槽但插槽里没有透传router-view /结果路由全都不渲染。这种问题不看组件层级结构真的很难发现。1.2 父组件正常显示子组件区域却空了一块URL 正确父组件的侧边栏、顶部导航、布局骨架都在但本该展示子组件内容的区域是空的。这是嵌套路由问题最典型的表现也是大多数人第一次遇到子路由无法显示时的样子。这个现象几乎可以直接锁死在父组件模板缺少router-view /上其次是子路由的path配置没有正确拼接导致最终匹配到的路由并不是你以为的那条。为什么这么说因为 Vue Router 渲染嵌套路由的核心机制就是逐层找出口父组件被渲染到上一层的router-view子组件被渲染到父组件模板里的router-view。中间任何一层缺了出口下一层的内容就无处安放。这就像搭积木每一层都得留一个孔位给下一层底层没留孔上层就只能悬空。1.3 访问子路径直接 404 或跳去了其他页面输入/user/info后页面弹出404或者被redirect带去了其他地址。这说明路由匹配阶段就失败了。常见原因有三个children里的path写了绝对路径以/开头导致脱离了父路径兜底路由catch-all被放在了具体路由之前先一步拦截了请求父路由或者子路由的name配置冲突导致按 name 导航时匹配到了错误记录。这类问题不像白屏那么安静它的特征非常明显定位起来反而快——一旦看到404你基本可以把排查范围缩小到路由配置文件本身。现场表现最优先检查项问题所在层整个页面白屏App.vue中顶层router-view是否存在根组件模板 / 路由表父组件正常、子组件空白父组件模板里的router-view是否存在父组件模板访问子路径直接 404 或跳转children中path的写法、兜底路由顺序路由配置把这个分类想清楚之后你就知道自己接下来应该打开哪个文件、查哪块代码了。三种现象对应的检查对象完全不同搞混了就会在错误的地方反复折腾。2. 五个高频配置错误逐一排查从漏写 router-view 到 path 前缀失控分类定方向定位还要靠点对点的检查。下面五个错误是我在代码评审和实际维护里见到频率最高的建议按顺序过一遍九成以上的嵌套路由问题都能在里面找到答案。这些错误单独看都不难难的是它们在真实项目中经常叠加出现——比如既漏了router-view又把path写成了绝对路径这时你就需要逐个排除而不是指望一次改一个字段就能解决。2.1 父组件模板里漏写 router-view这是最常见、也最没技术含量的问题。嵌套路由的渲染依赖出口父组件必须提供一个router-view /作为子组件的挂载点。如果父组件模板长这样template div classuser-layout UserSidebar / UserHeader / !-- 这里应该有一个 router-view /但是被