Vue routing dynamically loaded

First, a new project vue, generally we do not deal with specific routes, but when more and more project page, routing configuration will be growing, routing files will become poor maintenance

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from '@/components/children/Test2'
import Test3 from '@/components/children/Test3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/',
      name:'Home',
      component:Home,
      children:[
        {
          path:'/test2',
          name:'Test2',
          component:Test2,
        },
        {
          path:'/test3',
          name:'Test3',
          component:Test3,
        }
      ]

    }
  ]
})

This is a very simple routing documents, the first step we advanced optimization, classified according to the previous menu:

New test1.router.js file, place all the routing information in a menu test1

export default {
    path:'/test1',
    name:'test1',
    component: () => import('@/components/children/Test1'),
    children:[]
}

the Component: () => Import ( '@ / Components / Children / Test1' ) this is to configure routing lazy loading, slow to load first screen optimization 
introduced in the file index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from './test2.router.js'
import Test3 from './test3.router.js'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/',
      name:'Home',
      component:Home,
      children:[
        Test1,
        Test2,
        Test3
      ]

    }
  ]
})

To do this, we have to meet a lot of projects, and route documents have been very clear, but larger projects, still unclear

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)


let routers = [];

let getALLRouterMsg = (paths) => {
    paths.keys().forEach(
        (key) => routers.push(paths(key).default)
    )
}
getALLRouterMsg(require.context('.',true,/\.router\.js/))
export default new Router({
  routes: [
    {
      path:'/',
      name:'Home',
      component:Home,
      children:[
       ...routers
      ]

    }
  ]
})