如何实现带条件的Vue路由懒加载？

现有路由配置 #

当前routes.js中的目标路由配置如下：

{
  // ...其他配置
  path: ":term",
  name: "some-name",
  component: () => import("../path/to/com.vue")
  // ...其他配置
}

目标配置（带条件的懒加载） #

需要修改为根据路由参数term动态加载对应组件的配置：

{
  // ...其他配置
  path: ":term",
  name: "some-name",
  component: (route) => {
    // 注意：路由参数需从route.params中获取
    if (route.params.term === 'spam') {
       return import("../path/to/com1.vue")
    }
    return import("../path/to/com.vue")
  }
  // ...其他配置
}

操作步骤 #

• 直接替换原有路由对象的component属性为上述带条件判断的函数，重点注意路由参数存储在route.params对象下，原代码中route.term的写法是错误的，必须改为route.params.term才能正确获取参数值。
• 确认你的Vue Router版本为3.x及以上（该版本开始支持传入路由上下文参数的懒加载函数）。
• 开发环境下重启本地服务，生产环境下重新打包项目，修改后的配置即可生效。

内容的提问来源于stack exchange，提问作者Max S