嵌套路由-children

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

export default new Router({
  routes: [
    {
      path: "/main",
      component:Main,
       children: [
         {
           path: "user",
           component: User
         }, {
           path: "config",
           component: SystemConfig
         }
       ]
    }
  ]
})

注意:子路由中path切勿以/开头，否则被视为根路径(已踩坑)