Explanation of the code for dynamic loading of VUE routing

First, we will not deal with routing specifically when creating a new vue project. However, when there are more and more project pages, the routing configuration will become larger and larger, and the routing files will become difficult to maintain.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './'
import Test2 from '@/components/children/Test2'
import Test3 from '@/components/children/Test3'
 
(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 file. Our advanced step is to optimize it according to the first-level menu:

Create a new file and place all routing information under the first-level menu test1

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

component: () => import('@/components/children/Test1') This is to configure lazy loading of routing, optimize the slow loading of the first screen

Introduce this file

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

(Router)

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

  }
 ]
})

This can already satisfy many projects. The routing files are already very clear, but when the project is larger, it will still be unclear.

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

(Router)


let routers = [];

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

  }
 ]
})

The above are all the knowledge points introduced this time. Thank you for your support.