Vue警告 [ Named Route 'layout' has a default child route]

在Vue的项目中使用了Vue-Router，当某个路由有子级路由时，如下写法：

const routes = [
  {
    path: '/',
    name: 'layout',
    component: () => import('@/views/layout'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('@/views/home')
      },
      ...省略其他代码
    ]
  }
]

报出如下警告：

解决办法

因为当某个路由有子级路由的时候，这时候父级路由需要一个默认的路由，所以父级路由不能定义name属性，

解决办法：即去除父级的name属性即可。

即代码如下：

const routes = [
  {
    path: '/',
    // name: 'layout',
    
    ...省略其他代码
  }
]

参考文章