vue项目优化 — 按需加载路由

组件先在路由里注册但不进行组件的加载与执行，等到需要访问组件的时候才进行真正的加载，通过import()动态地加载模块，把子模块单独分离出来，打包成一个单独的文件

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，
省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return

//vue异步组件和webpack的代码分块点功能结合，实现按需加载
//模板字符串动态拼接组件路径（ps：@指向src该目录下必须有一级目录，不然异步加载组件找不到module）
const equipDefault = name => () => import(`@/page/equipDefault/${name}.vue`)   

Vue.use(Router)

const router = new Router({
    routes: [{
            path: '/',
            name: 'loginView',
            component: loginView
        },
        {
            path: '/AccountAudit',
            name: 'AccountAudit',
            component: () =>
                import ( /* webpackChunkName: "AccountAudit" */ '@/page/AccountAudit/AccountAudit.vue')
        },
        {
            path: '/equipDefault',
            name: 'equipDefault',
            component: equipDefault('equipDefault')
        },
        {
            path: '/equipDefaultEdit',
            name: 'equipDefaultEdit',
            component: equipDefault('equipDefaultEdit')
        },
        {
            path: '/equipDefaultRevise',
            name: 'equipDefaultRevise',
            component: equipDefault('equipDefaultRevise')
        },

        {
            path: '/Company',
            name: 'Company',
            component: Company,
            meta: { keepAlive: true }
        },
        {
            path: '/DeviceLibrary',
            name: 'DeviceLibrary',
            component: DeviceLibrary,
            meta: { keepAlive: true }
        }
    ]
})
router.beforeEach((to, from, next) => {                       
    if(to.path==='/loginView' || sessionStorage.getItem('sessionStorage')){
        next();
    }else{
        next('/loginView');
    }
});
export default router;

通过路由钩子beforeEach判断用户有没有登陆过，如果登陆过就直接跳到目的页面，如果没有登陆过，就跳转到登陆页
to.path===’/loginView’；这个判断必须要有的，否则会出现死循环