A puzzle in the nesting route of the official tutorial of vue route

it is said in the tutorial

at this point, based on the above configuration, when you visit / user/foo, the exit of User will not render anything, this is because there is no match to the appropriate child route. If you want to render something, you can provide an empty child route:
When

accesses / user/foo, the User component is capable of rendering, but UserProfile and UserPosts as child components cannot be rendered. I don"t know why the tutorial says, "the exit of User will not render anything."

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User,
      children: [
        {
          //  /user/:id/profile 
          // UserProfile  User  <router-view> 
          path: "profile",
          component: UserProfile
        },
        {
          //  /user/:id/posts 
          // UserPosts  User  <router-view> 
          path: "posts",
          component: UserPosts
        }
      ]
    }
  ]
})
Mar.22,2021

means that if you directly access the secondary path, the parent routing component component should correspond to an empty page that contains only one

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


I don't know why the tutorial says, "the exit of User will not render anything." exit should refer to < router-view > < / router-view >
in User. The path does not match successfully when accessing / user/foo because foo becomes the params parameter
, so < router-view > < / router-view > in User does not render anything

.
Menu