在Nuxt的extendRoutes中导入模块报错_myModule未定义，求支持及解决办法

你遇到的问题是因为Nuxt在生成路由文件（.nuxt/router.js）时，只会序列化extendRoutes里的路由配置代码，不会自动把你在nuxt.config.js里导入的外部模块（比如myModule）注入到生成的文件中，所以运行时会提示_myModule is not defined。这种场景不是完全不支持，只是需要换一种方式处理依赖。

• 动态导入模块：在redirect函数里用动态导入的方式加载模块，因为redirect是在客户端执行的，动态导入能确保模块被正确加载：

  // nuxt.config.js
  router: {
     extendRoutes: function(routes) {
         routes.push({
            path: "/from",
            redirect(from) {
              // 动态导入模块
              import("./scripts/myModule").then(module => {
                module.default(from);
              });
              return "/to";
            }
         });
     }
  }
  

  注意：如果myModule里是异步操作，不会影响redirect的返回值，因为redirect需要同步返回跳转路径。

• 内联模块逻辑：如果myModule的代码量不大，直接把逻辑写在redirect函数里，省去外部导入的麻烦：

  // nuxt.config.js
  router: {
     extendRoutes: function(routes) {
         routes.push({
            path: "/from",
            redirect(from) {
              // 直接写myModule里的逻辑
              console.log(from.path);
              // ...其他逻辑
              return "/to";
            }
         });
     }
  }
  

• 通过插件注册全局方法：把myModule注册为客户端全局可用的方法：

  1. 在项目根目录创建plugins/myModule.client.js文件，内容如下：

     import myModule from '../scripts/myModule';
     // 挂载到window对象
     window.myModule = myModule;
     

  2. 在nuxt.config.js里配置插件：

     export default {
       // ...其他配置
       plugins: ['~/plugins/myModule.client.js']
     }
     

  3. 然后在extendRoutes里直接调用：

     router: {
        extendRoutes: function(routes) {
            routes.push({
               path: "/from",
               redirect(from) {
                 window.myModule(from);
                 return "/to";
               }
            });
        }
     }
     

内容的提问来源于stack exchange，提问作者d-_-b