vue-router路由懒加载

一 路由懒加载

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

[code]import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
routes: [
//common
{
path: '/',
redirect: '/dashboard'
},
{
path: '/login',
component: resolve => require(['../pages/Login.vue'], resolve)
},
{
path: '*',
redirect: '/404'
},
{
path: '/404',
component: resolve => require(['../pages/404.vue'], resolve),
meta: { title: '404' }
},
{
path: '/403',
component: resolve => require(['../pages/403.vue'], resolve),
meta: { title: '403' }
},
{
path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: { title: '自述文件' },
children:[
{
// 通勤统计报表组件
path: '/statisticsInfo',
component: resolve => require(['../pages/commuteManage/statisticsInfo.vue'], resolve),
meta: { title: '统计报表' },
children:[
//部门情况
{
path: '/department',
component: resolve => require(['../pages/commuteManage/statisticsInfo/DepartInfoClass.vue'], resolve),
meta: { title: '部门情况' }
},
//员工情况
{
path: '/staff',
component: resolve => require(['../pages/commuteManage/statisticsInfo/RouteDailyInfoClass.vue'], resolve),
meta: { title: '员工情况' }
},
//线路情况
{
path: '/routerLine',
component: resolve => require(['../pages/commuteManage/statisticsInfo/RouteInfoClass.vue'], resolve),
meta: { title: '线路情况' }
}
]
},

{
// 权限角色管理页面
path: '/roleInfo',
component: resolve => require(['../pages/permissionManage/RoleInfo.vue'], resolve),
meta: { title: '角色管理' }
},
{
// 权限用户管理页面
path: '/userInfo',
component: resolve => require(['../pages/permissionManage/UserInfo.vue'], resolve),
meta: { title: '用户管理' }
}
]
}

]
})