2、vue子路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。
同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

要注意，以 / 开头的嵌套路径会被当作根路径。
Vue的官方文档描述如上。
地址：https://router.vuejs.org/zh/guide/essentials/nested-routes.html

操作过程中，具体会遇到以下3种情况：

1、vue文档

const router = new VueRouter({
  routes: [
    { path: '/home', component: User,
      children: [
        {
          path: 'children1',
          component: UserProfile
        },
        {
          path: 'children2',
          component: UserPosts
        }
      ]
    }
  ]
})

XXX/home 路径展示的是User页面
XXX/home/children1 路径展示的是UserProfile页面
XXX/home/children2路径展示的是UserPosts页面

2、如果将子路由的path加斜杠，相当于书写错误

const router = new VueRouter({
  routes: [
    { path: '/home', component: User,
      children: [
        {
          path: '/children1',
          component: UserProfile
        },
        {
          path: '/children2',
          component: UserPosts
        }
      ]
    }
  ]
})

XXX/home 路径展示的是User页面
访问
XXX/home/children1
XXX/home/children2
两个子路径，UserProfile、UserPosts页面展示为空白
因为以 / 开头的嵌套路径会被当作根路径。
只有修改访问地址为
XXX/children1
XXX/children2
才能访问对应页面

3、
还有人加多个斜杠书写为

const router = new VueRouter({
  routes: [
    { path: '/home', component: User,
      children: [
        {
          path: '/home/children1',
          component: UserProfile
        },
        {
          path: '/home/children2',
          component: UserPosts
        }
      ]
    }
  ]
})

这样在子路由里写完整路径，同样可以访问
XXX/home 展示User页面
XXX/home/children1 展示UserProfile页面
XXX/home/children2展示的UserPosts页面

综上，使用第一种写法更为规范方便。