vue router 懒加载常见写法

其他router相关内容索引

序号	内容	连接地址
1	vue router 整合引入	https://blog.csdn.net/qq_21271511/article/details/109368459
2	vue router 模块化开发	https://blog.csdn.net/qq_21271511/article/details/109369247
3	vue router 动态路由及菜单实现之一	https://blog.csdn.net/qq_21271511/article/details/109496415
4	vue router 动态路由及菜单实现之二	https://blog.csdn.net/qq_21271511/article/details/109998976
5	vue router 动态路由及菜单实现问题汇总	https://blog.csdn.net/qq_21271511/article/details/110038256
6	vue el-menu多级菜单递归	https://blog.csdn.net/qq_21271511/article/details/109889934
7	vue router 懒加载常见写法	https://blog.csdn.net/qq_21271511/article/details/109776741

vue router 懒加载

当项目越来越大，router越加越多，且用户一次性不会访问那么多的router，所以需要在用户访问的时候将router加载上，这样可以很好的提升用户体验

懒加载写法

三种常见的写法

//遍历后台传来的路由字符串，转换为组件对象
export function filterAsyncRouter(asyncRouterMap) { 
    // console.log("asyncRouterMap"+asyncRouterMap);
    const accessedRouters = asyncRouterMap.filter(route => {
        if (route.component) {
            if (route.component === 'system') {
                route.component = system
            } else {
                // console.log("load:" + loadView(route.component));
                route.component = loadView(route.component)
                // console.log("import:" + __import(route.component));
                // route.component = __import(route.component)
            }
        }
        if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children)
        }
        return true
    })
    return accessedRouters
}

/* 加载路由组件，两种方式均可 */
const loadView = (view) => { // 路由懒加载
    // return (resolve) => require([`@/views/${view}`], resolve)
    // return () => import('@/views/' + view)
    return () => Promise.resolve(require(`@/views/${view}`))
}

第一种

一般的写法，require是 AMD规范引入方式

return (resolve) => require([`@/views/${view}`], resolve)

第二种

直接将组件引入的方式，import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

return () => import('@/views/' + view)

cli 构建项目时例子里用的就是import，推荐也是使用import来引入模块

第三种

和第一种本质一样，都是使用require获取到组件，再用Promise对象返回组件

return () => Promise.resolve(require(`@/views/${view}`))

扩展

import 和require 比较

1. import 是解构过程并且是编译时执行
2. require 是赋值过程并且是运行时才执行，也就是异步加载
3. require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量

import webpack时的问题

注意：返回import表达式 在webpack 构建的时候会报这个警告

Critical dependency: the request of a dependency is an expression

意思就是这个请求的依赖是一个表达式

这个时候动态加载路由实际没有加载上去，这时候就换成第三种写法就可以了。import实际返回的也是一个promise对象

官网的说法：