附加嵌套 <router-view /> 不会从子路由呈现视图

Question

我设置了一个带路由的新 Vue3 项目。在 src 中，我创建了一个带有 Index.vue

的新目录“foo”

    <template>
      <div>
        <div>Foo</div>
        <router-view />
      </div>
    </template>

和带有 Home.vue

的子目录“views”

    <template>
      <div>Bar</div>
    </template>

在 foo 目录中，我还设置了一个 router.js，我在其中注册了该功能的所有视图

    import Index from "./Index.vue";
    import Home from "./views/Home.vue";
    
    const featureRoute = {
      path: "/foo",
      component: Index,
      children: [
        {
          path: "/",
          component: Home,
        },
      ],
    };
    
    export default router => {
      router.addRoute(featureRoute);
    };

在主路由器文件中，我将代码更改为

    import { createRouter, createWebHistory } from "vue-router";
    
    import registerFooRouter from "../foo/router";
    
    const routes = [
      {
        path: "/",
        redirect: "/foo",
      },
    ];
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    registerFooRouter(router);
    
    export default router;

App.vue:

    <template>
      <router-view />
    </template>

我的期望：

当运行我被重定向到 /foo 的应用程序时。它将呈现一个内容为“Foo”的div，下面是另一个内容为“Bar”的div

发生了什么：

重定向工作正常。但不幸的是，我只看到 div 内容为“Foo”。缺少内容为“Bar”的第二个 div。

所以它似乎无法呈现 Home.vue 文件。

有人知道这里缺少什么吗？

Answer 1

path: "/", inside children 被 Vue Router 解释为根路径。如果你想在“/foo”路由中渲染“默认”的东西，使用空字符串：

const featureRoute = {
  path: "/foo",
  component: Index,
  children: [
    {
      path: "",
      component: Home,
    },
  ],
};

检查文档中的 last example

附加嵌套 <router-view /> 不会从子路由呈现视图

Additional nested <router-view /> does not render view from child route

vue.js

vue-router