其他嵌套<路由器视图 /> 不会从子路由呈现视图

Question

我用路由设置了一个新的Vue3项目。在src中我创建了一个新目录"foo"带Index.vue

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

和子目录"view "Home.vue

<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;

TheApp.vue:

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

我的期望:

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

会发生什么:

重定向工作正常。但不幸的是，我所看到的是div与内容"Foo"。第二个div，内容为"bar";不见了。

---

所以它似乎无法渲染Home.vue文件。

有人知道这里少了什么吗?

Answer 1

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

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

检查文档

中的最后一个示例