如何正确配置vue 3路由器子级，使嵌套路由按预期工作

Question

我正在使用vue 3路由器开发vue 2应用程序。我想要一个像/user这样的路线，并且在/user/profile和/user/设置中。因此，我将我的vue-router.js文件配置为

router.js

import Vue from "vue";
import Router from "vue-router";
import User from "../components/User";
import Settings from "../components/Settings";
import Profile from "../components/Profile";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/user",
name: "user",
component: User,
children: [
{
path: "/settings",
name: "settings",
component: Settings
},
{
path: "/profile",
name: "profile",
component: Profile
}
]
}
]
});

User.vue

<template>
<h1>User</h1>
</template>

Settings.vue

<template>
<h1>Settings</h1>
</template>

Profile.vue

<template>
<h1>Settings</h1>
</template>

App.vue

<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app",
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

每当我访问/user时，都会呈现User.vue，但当我尝试访问/user/profile或/user/settings时，DOM中不会呈现任何内容。我遵循了未在vue js中渲染的Child路由组件和Activate路由器链接，该链接具有CRUD设置的多层嵌套路由，但运气不佳。我想要的是User.vue应该在/user路由上呈现，并且当我们在/user/profile路由中时，只有Profile.vue的内容应该被呈现。我试图在User.vue中包含<router-view />，但在/user/profile中同时获得了User.vue和Profile.vue的内容。我正在附加代码沙盒链接，以便在直播中看到它，并获得更好的理解，因为我不知道如何在SO中设置它。

链接：https://codesandbox.io/s/nostalgic-sky-3wvhqr?file=/App.vue:0-354

我怎样才能做到这一点？

Answer 1

UserParent.vue

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

router.js

routes: [
{
path: "/user",
component: UserParent,
children: [
{
path: "/",
name: "user",
component: User
},
{
path: "/settings",
name: "settings",
component: Settings
},
{
path: "/profile",
name: "profile",
component: Profile
}
]
}
]