为何Vue Router需命名空路径子路由才能正常渲染？

路由配置对比 #

正常工作的配置：

{
    //name: 'ProductComments',
    path: 'comments',
    children: [
        {
            name: 'ProductComments',
            path: '',
            component: ProductComments
        },
        {
            name: 'EditProductComment',
            path: ':commentId/edit',
            component: EditProductComment
        }
    ]
}

触发问题的配置：

{
    name: 'ProductComments',
    path: 'comments',
    children: [
        {
            //name: 'ProductComments',
            path: '',
            component: ProductComments
        },
        {
            name: 'EditProductComment',
            path: ':commentId/edit',
            component: EditProductComment
        }
    ]
}

问题根源 #

这是路由库（从配置风格判断为Vue Router）的命名路由匹配规则与空路径子路由特殊性共同作用的结果：

1. 空路径子路由的独立定位
   空路径(path: '')的子路由是父路由的"默认内容容器"，但它是一条独立的路由记录，并非父路由的组成部分。只有当父路由匹配成功，且没有其他子路由匹配当前路径时，它才会被渲染。

2. 命名路由的一对一匹配逻辑
   命名路由是与具体路由记录绑定的：

   • 把名称放在子路由上时，ProductComments这个名称直接对应空路径子路由，访问/comments时，路径匹配父路由+空子路由，自然触发ProductComments组件渲染。
   • 把名称放在父路由上时，ProductComments仅对应父路由容器本身，但父路由没有自己的component，只是一个路由分组的壳。此时即使路径匹配父路由，系统也不会自动激活空子路由——除非直接通过路径访问/comments，但如果是通过命名路由跳转，只会加载父路由容器，不会触发子路由的渲染。

3. 警告的核心含义
   路由库的警告已经明确提示：父路由命名后，它的空路径子路由没有绑定名称，此时使用父路由名称跳转不会关联到这个子路由。命名路由不存在"继承"关系，父路由的名称无法自动关联到子路由。

解决思路 #

• 官方推荐方案：给空路径子路由单独设置名称，保持原有的工作配置。
• 若坚持给父路由命名，可通过redirect将父路由指向空子路由：

  {
      name: 'ProductComments',
      path: 'comments',
      redirect: { name: 'ProductCommentsDefault' },
      children: [
          {
              name: 'ProductCommentsDefault',
              path: '',
              component: ProductComments
          }
      ]
  }
  

内容的提问来源于stack exchange，提问作者Jez