vue 嵌套路由 页面空白问题

vue 写嵌套路由时 页面打开空白

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/index',
      name: 'index',
      component: Notice,
      children:[
        {
          path: '/notice',
          name: 'notice',
          component: Notice
        },

      ]
    },
    {
      path: '/science',
      name: 'science',
      component: Science
    }
  ]
})

按照正常逻辑这样写，感觉没问题，但是调试时出现了页面嵌套路由页面空白问题

解决方法：
把子路由的path路径的“/”去掉

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/index',
      name: 'index',
      component: Notice,
      children:[
        {
          path: 'notice', //去掉“/”
          name: 'notice',
          component: Notice
        },

      ]
    },
    {
      path: '/science',
      name: 'science',
      component: Science
    }
  ]
})