vue router官方教程 嵌套路由里边的一个疑惑

教程上说

此时,基于上面的配置,当你访问 /user/foo 时,User 的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的 子路由:

访问 /user/foo 时,User组件是能够渲染的,只是无法渲染作为子组件的UserProfile和UserPosts。不知道教程为什么说 “User 的出口是不会渲染任何东西”

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
        }
      ]
    }
  ]
})
阅读 1.6k
2 个回答

不知道教程为什么说 “User 的出口是不会渲染任何东西”
这句话出口应该是指 User中的<router-view></router-view>
在访问 /user/foo 时路径未匹配成功 因为foo 变成params参数
所以 User中的<router-view></router-view> 未渲染任何东西

意思是如果直接访问二级路径的话 父路由组件component对应的应该是一个空的页面 这个页面里只有一个

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

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题