vue-router的懒加载

官方的解释

1.当打包构建应用时, javascript包会变得非常大,影响页面加载

2. 如果我们能把不同的路由分割成不同的代码块, 当路由被访问的时候再加载对应的组块,就会变得高效了

原来的代码

import Vue from 'vue'
import Router from 'vue-router'
import Home form '../components/Home.vue'
import About form '../components/Home.vue'
import User form '../components/Home.vue'


// 1. 通过Vue.use插件,安装
Vue.use(Router)

// 2. 导出
export default new Router({
  routes: [
    {
      path: '',
      redirect: '/home' 
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user/:userid',
      component: User
    }
  ],
  mode: 'history'
})

---

现在的代码

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

// 1. 通过Vue.use插件,安装
Vue.use(Router)

// 2. 导出
export default new Router({
  routes: [
    {
      path: '',
      redirect: '/home' 
    },
    {
      path: '/home',
      component: () => import ('../components/Home.vue')
    },
    {
      path: '/about',
      component: () => import ('../components/About.vue')
    },
    {
      path: '/user/:userid',
      component: () => import ('../components/User.vue')
    }
  ],
  mode: 'history'
})