vue路由嵌套无法渲染 页面空白

在学习vue的时候，根据官方教程卸了嵌套路由，结果页面空白

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/layout/login'
import LayoutHeader from '@/components/layout/LayoutHeader'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      children: [
        {
          path: '/header',
          component: LayoutHeader
        }
      ]
    }
  ]
})

在地址栏中输入路由，一片空白。
父组件中 也加了。

解决

修改上述代码，将path: '/header'改为path: '/login/header'

{
      path: '/login',
      name: 'login',
      component: login,
      children: [
        {
          path: '/login/header',
          component: LayoutHeader
        }
      ]
    }

问题解决，但是感觉好麻烦，官方给的例子明明不是这么写的，在逗我。

解决，更新版

还是那个代码把'/header'的斜杠去掉变成'header'就行了，难受。

子组件无法渲染。一般有两种情况：

1. 父组件没有
2. 子路由配置时加了一个斜杠'/'

人家官方写得明明白白，没有斜杠，是我逗。