vue-router] Named Route 'Layout' has a default child route. When navigating to this named route (:to="{name: 'Layout'}"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.

在 Vue Router 中，如果一个命名路由有默认子路由，直接导航到这个命名路由时，默认子路由不会被渲染。应该移除这个命名路由的名称，并使用默认子路由的名称来创建命名链接。

🔗 命名路由问题

• 默认子路由不渲染：当直接导航到一个有默认子路由的命名路由时，子路由不会被渲染。

🛠️ 解决方法

• 移除命名：移除父路由的命名。
• 使用子路由命名：使用默认子路由的名称来创建 <router-link>。

📝 示例代码

• 定义路由：

const routes = [
  {
    path: '/user/:username',
    name: 'profile',
    component: User
  },
  {
    path: '/layout',
    component: Layout,
    children: [
      {
        path: '',
        component: DefaultChild
      }
    ]
  }
]

• 使用子路由命名链接：

<router-link :to="{ name: 'defaultChild' }">
  Default Child Route
</router-link>