import() 动态加载模块,使用记录

需求背景： 项目重构差不多了， 需要在部分路由中加个登录埋点。但问题来了， 因为这个登录是写在router.beforeEach 中的，埋点需要页面中的配置数据_。 思来想去试了好几种方法没有完美解决， 各位看官有更好的方法，多多交流

思路一

是在路由beforeEach 钩子中在 即将跳转的时候通知我可以访问到页面了

• 用了eventBus 来发送通知

 router.beforeEach(async (to, from) => {
  try {
    const phone = await getAppUserInfo(to)
    await userStore.phoneLogin(params)
    emitter.emit('triggerAutoLogin','success') // 抛出登录成功事件
    return true
})
}catch (error) {}

// 页面中监听
<script lang="ts" setup>
emitter.on('triggerAutoLogin',()={
    
})
</script>

结果： 初始化不会执行， 路由变化的时候回执行。 感觉像是第一次没注册进来的样子~~

• nextTick 和 setTimeout

 router.beforeEach(async (to, from) => {
  try {
    const phone = await getAppUserInfo(to)
    await userStore.phoneLogin(params)
setTimeout(() => {
        emitter.emit('triggerAutoLogin','success') // 抛出登录成功事件
}, 0);

    return true
})
}catch (error) {}

// 页面中监听
<script lang="ts" setup>
emitter.on('triggerAutoLogin',()={
    
})
</script>

结果： 初始化不会执行， 路由变化的时候回执行。如果定时器的延迟时间不能确定， 放到下一个事件循环里也没用~

• router 打标记，埋点成功后删除

我想了这种方式， 记在window也行， 虽然能解决 但没用

思路二

我又想了下， 不就是获取每个页面中的配置数据吗， 配置文件是单独的， 只要根据url动态获取数据不久行了， 如果以后要获取组件数据的话也可以改造。 于是就想到了import

ES2020提案 引入import()函数，支持动态加载模块

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

• 使用 import 埋点

 router.beforeEach(async (to, from) => {
  try {
    const phone = await getAppUserInfo(to)
    await userStore.phoneLogin(params)
     triggerAutoLogin(to, 'success', { phone }) // 抛出登录成功事件
    return true
})
}catch (error) {}

// report.ts
 *
 * @param name {string} 页面名称， 文件夹名称 love 等
 * @param type {string} 是否登录成功 success error
 * @param res 数据
 */
export const triggerAutoLogin = async (to, type, res) => {
  const module = await import(/* @vite-ignore */ `/src/views/Special/pages/${name}/config`)
  const preData = module[dataType]
}

最后

如果有什么错误，欢迎指正~