路由懒加载详细讲解与简化写法

什么是路由懒加载？

整个网页默认是刚打开就会加载所有的页面。而路由懒加载就是只加载你当前点击的那个模块。安需要去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。
实现原理：将路由相关的组件，不再直接导入了。而是改成异步组件的写法，只是当成函数被调用的时候，去加载对应的组件内容

传统路由配置和懒加载代码对比

1.传统路由配置：

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


import Login from '@/views/login/index.vue'
import Reg from '@/views/reg/index.vue'
import Home from '@/views/home/index.vue'

Vue.use(Router)
const router =new VueRouter({
routes:[
{path:'/login',component:Login},
{path:'/home',component:Home},
{path:'/reg',component:Reg}
]
})


export default router

2.路由懒加载写法

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

const Login = ()=>import('@/views/login/index.vue')
const Reg = ()=>import('@/views/reg/index.vue')
const Home = ()=>import('@/views/home/index.vue')

Vue.use(Router)

const router =new VueRouter({
routes:[
{path:'/login',component:Login},
{path:'/home',component:Home},
{path:'/reg',component:Reg}
]
})

3.路由懒加载写法简写（省去变量）

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

Vue.use(Router)

const router =new VueRouter({
routes:[
{path:'/login',component:()=>import('@/views/login/index.vue')},
{path:'/home',component:()=>import('@/views/home/index.vue')},
{path:'/reg',component:()=>import('@/views/reg/index.vue')}
]
})

以上为路由懒加载写法配置