Vue嵌套路由右侧不显示的三大原因是：子路由路径误加斜杠、父组件缺失、父路径未配置空子路由或重定向；菜单跳转需用完整路径。
Vue 嵌套路由配置本身不难，但左侧菜单点击后右侧内容不显示，90% 是因为三个关键点没对上：子路由路径写错了斜杠、父组件漏了 <router-view></router-view>、默认子路由没配空路径 path: ''。
子路由路径不能以 / 开头
嵌套路由的 path 是相对父路由的，不是从根开始。写成 /news 就会变成绝对路径，导致匹配失败。
- ✅ 正确写法：
{ path: 'news', component: News }→ 完整路径是/home/news - ❌ 错误写法：
{ path: '/news', component: News }→ 实际匹配/news，和父路径无关
父组件必须声明
子路由组件要渲染出来，全靠父组件模板里那一行 <router-view></router-view>。它就像个“插槽”，没有它，子组件再匹配也没地方画。
例如 Home.vue 必须包含：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
首页
访问父路径时右侧空白？补一个空子路由
比如你配置了 /home 下有 news 和 message，但直接访问 /home 时右侧一片空白——这是因为没告诉 Vue “/home 这个地址该显示什么”。
解决办法：加一条 path: '' 的子路由作为默认入口：
-
{ path: '', component: HomeDefault }→ 访问/home时自动展示 - 也可重定向：
{ path: '', redirect: '/home/news' }
菜单跳转链接要写完整路径
用 <router-link></router-link> 时，to 值必须是最终完整路径，不能只写子路径名。
- ✅ 正确：
<router-link to="/home/news">新闻</router-link> - ❌ 错误：
<router-link to="news">新闻</router-link>（不会解析为嵌套路径）
