VUE路由动态加载实例代码讲解

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/ponents/HelloWorld'
import Home from '@/ponents/Home'
import Test1 from './test1.router.js'
import Test2 from '@/ponents/children/Test2'
import Test3 from '@/ponents/children/Test3'
 
Vue.use(Router)
 
export default new Router({
 routes: [
  {
   path: '/HelloWorld',
   name: 'HelloWorld',
   ponent: HelloWorld
  },
  {
   path:'/',
   name:'Home',
   ponent:Home,
   children:[
    {
     path:'/test2',
     name:'Test2',
     ponent:Test2,
    },
    {
     path:'/test3',
     name:'Test3',
     ponent:Test3,
    }
   ]
 
  }
 ]
})

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

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/ponents/HelloWorld'
import Home from '@/ponents/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',
   ponent: HelloWorld
  },
  {
   path:'/',
   name:'Home',
   ponent:Home,
   children:[
    Test1,
    Test2,
    Test3
   ]

  }
 ]
})

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/ponents/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',
   ponent:Home,
   children:[
    ...routers
   ]

  }
 ]
})