路由懒加载模式

路由懒加载

没用懒加载现状：

VueRouter是在路由规则中，当路由规则模块被执行时，所有的页面组件会被一次性加载进来

编辑项目中的路由模块，将首页直接加载即可，其他所有页面使用懒加载方式引入使用：

原先引入页面方式：

import Login from '../pages/Login'
import Main from '../pages/Main'
//创建映射
const routes=[
    {
        name:'login',
        path:'/login',
        alias:'/',
        component:Login 
    },{
     name:'main',
     path:'/main',
     component:Main
     ]

上述的加载方式，如果一个项目中包含的页面组件过多，就会让项目启动后的第一个页面加载缓慢；针对这样的问题路由模块提供了一种加载方式：按需加载，当用户的请求匹配到某个路由路径时再加载对应的路由组件，这样的加载方式可以有效的避免首页加载缓慢问题，称为路由懒加载技术

固定语法，通过内建语法懒加载引入页面组件

编辑项目中的路由模块，将首页直接加载即可，其他所有页面使用懒加载方式引入使用：

使用懒加载方式：

const routes=[
    {
        name:'login',
        path:'/login',
        alias:'/',
        component:Login 
    },{
     name:'main',
     path:'/main',
     component:()=>import ('../pages/Main')]