Vue嵌套路由右侧不显示的三大原因是：子路由路径误加斜杠、父组件缺失、父路径未配置空子路由或重定向；菜单跳转需用完整路径。

Vue 嵌套路由配置本身不难，但左侧菜单点击后右侧内容不显示，90% 是因为三个关键点没对上：子路由路径写错了斜杠、父组件漏了 、默认子路由没配空路径 path: ''。

子路由路径不能以 / 开头

嵌套路由的 path 是相对父路由的，不是从根开始。写成 /news 就会变成绝对路径，导致匹配失败。

• ✅ 正确写法：{ path: 'news', component: News } → 完整路径是 /home/news
• ❌ 错误写法：{ path: '/news', component: News } → 实际匹配 /news，和父路径无关

父组件必须声明

子路由组件要渲染出来，全靠父组件模板里那一行 。它就像个“插槽”，没有它，子组件再匹配也没地方画。

例如 Home.vue 必须包含：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

访问父路径时右侧空白？补一个空子路由

比如你配置了 /home 下有 news 和 message，但直接访问 /home 时右侧一片空白——这是因为没告诉 Vue “/home 这个地址该显示什么”。

解决办法：加一条 path: '' 的子路由作为默认入口：

• { path: '', component: HomeDefault } → 访问 /home 时自动展示
• 也可重定向：{ path: '', redirect: '/home/news' }

菜单跳转链接要写完整路径

用 时，to 值必须是最终完整路径，不能只写子路径名。

• ✅ 正确：新闻
• ❌ 错误：新闻（不会解析为嵌套路径）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！