vue-router routing lazy loading

Lazy loading is lazy-loading, as the name implies, lazy loading, when is it used and when is it loaded;

For an ordinary Vue single-page application project, if it is packaged directly with webpack, the packaged javascript package will be very large, resulting in a very long time to enter the home page; so there is an idea of ​​lazy loading;

---

So what is lazy loading of routes?

Divide the different components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed. This is to use vue's asynchronous components and webpack's code segmentation;

If you want to know about vue asynchronous components, please move here.
If you want to know about webpack's code splitting, please move here.

Routing lazy loading specific code implementation:

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/index.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})