JS动态引入模块

这是静态引入，import xx from ‘xxx’；

这是动态引入，import('xxx')

动态引入是一个异步操作，即它会返回一个Promise对象，因此我们可以捕获引入失败的异常。

具体运用场景：

路由由后端动态生成，前端根据获取到的路由动态生成菜单，并根据对应路由去找到对应的组件进行跳转。

譬如路由为/home，那么对应文件/views/home/index.vue必须存在，才能正确进行跳转。

若后端新增了新的路由（无论是直接操作数据库，或者前端通过配置页面去调接口新增），那么此时打包的项目内是不存在新增路由的页面文件，因此需要用到动态路由。

const router = {
                    path: item.path,
                    name: item.path || '',
                    component: () => import(`@/views/${item.path}/index.vue`).catch(() => {
                            return import('@/components/Transitionpage/index.vue') //未找到上面引入的模块时，引入该过渡页面
                        }),
                })
}

注意，返回的是一个promise对象，因此无论是正常捕获then还是异常捕获catch，都要重新返回一个文件引用，否则会卡住。