Vue学习笔记之vue-router路由懒加载

现如今，前端项目中SPA已成为主流。但是单页应用在vue项目启动时会出现短暂的空白，也就是vue项目存在首次加载缓慢的问题。

懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随时用，随时加载。

为什么会出现懒加载？

像vue这种单页应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的很多内容，由于加载时间过长，就会出现短暂的空白即白屏，即使是做了loading也不利于用户体验。那么懒加载在可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

懒加载写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('./pages/login.vue')
    },
    {
      path: '/',
      name: 'index',
      component: () => import('./pages/index.vue')}
  ]
})

非懒加载路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@components/login'
import Index from '@components/Index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'index',
      component: Index}
  ]
})