vue first screen optimized loading (1) (lazy loading)

# Route lazy loading (load on demand)

Routes that have been lazy loaded:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/components/index'),
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: () => import('@/components/indexs/home')
        }
      ]
    },

  ]
})

No lazy loading route

import Vue from 'vue'
import Router from 'vue-router'

import index from '@/components/index'
import home from '@/components/indexs/home'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: home,
        }
      ]
    },

  ]
})

Don't appear "/" in the path of nested routes

Function: components are loaded on demand, reducing the loading time of the first screen.

Refer to the official link: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89 % E7% BB% 84% E5% 88% 86% E5% 9D% 97