如何正確配置 vue 3 路由器子項以使嵌套路由按預期工作？

Question

我正在使用 vue 3 路由器開發 vue 2 應用程序。 我想要一條像 /user 這樣的路由，並且在 /user/profile 和 /user/settings 中。 所以，我將我的 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 中未呈現的子路由組件和激活具有 CRUD 設置但沒有運氣的多層嵌套路由的路由器鏈接。 我想要的是 User.vue 應該在/user路由上呈現，並且當我們在/user/profile路由時只應該呈現Profile.vue的內容。 我試圖在User.vue中包含<router-view />但我在/user/profile中同時獲得了User.vue和Profile.vue內容。 我附上 codesandbox 鏈接以實時查看它並獲得更好的理解，因為我不確定如何在 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
      }
    ]
  }
]