Vue3项目中嵌套<router-view />无法渲染子路由视图的问题求助

你遇到的问题核心在于子路由的path配置错误，导致Home.vue无法被正确渲染到父组件的<router-view>中。

错误原因 #

在Vue Router的规则里，子路由的path如果以/开头，会被解析为绝对路径，而不是相对于父路由的路径。你原来的子路由配置：

children: [
  { path: "/", component: Home },
],

这里的path: "/"对应的是根路径/，但你的主路由已经把/重定向到/foo了。当访问/foo时，父路由/foo匹配成功，但找不到对应的子路由（因为子路由的路径是/，不是/foo的子路径），所以<router-view>就没有内容渲染。

修正方案 #

把子路由的path改成空字符串（表示匹配父路由的默认子路径），修改foo/router.js中的children配置：

const featureRoute = {
  path: "/foo",
  component: Index,
  children: [
    { path: "", component: Home }, // 将"/"改为空字符串
  ],
};

为什么这样改？ #

当子路由的path为空字符串时，它会匹配父路由的路径/foo，此时父组件Index.vue中的<router-view>就会渲染Home.vue的内容，正好符合你预期的“Foo”下方显示“Bar”的效果。

额外验证点 #

确认你的其他配置没有问题：

• 主路由的重定向{ path: "/", redirect: "/foo" }正常工作
• registerFooRouter(router)正确注册了子路由模块
• App.vue和Index.vue中的<router-view>都正确放置

修改后重新运行项目，就能看到预期的两个div内容了。

内容的提问来源于stack exchange，提问作者Question3r