Vue3项目中引入公共模块后，useRouter()返回undefined是什么原因？

Vue3项目：公共模块引入导致useRouter()返回undefined的解决方案

本文分析在Vue3项目中引入公共模块后，useRouter()返回undefined，并最终追溯到项目中存在多个vue-router.mjs文件的问题。

问题描述: 开发者在将公共模块（@ht/common）引入系统管理模块（system）后，system模块中的useRouter()方法返回undefined。调试发现项目存在两个vue-router.mjs文件，分别位于不同的node_modules目录下。使用yarn link @ht/common后，问题解决。

问题根源: @ht/common和system模块都依赖vue-router，导致安装了两个不同的vue-router副本。 system模块无法获取正确的路由实例，因此useRouter()返回undefined。 yarn link通过符号链接解决了vue-router的重复安装问题。

立即学习“前端免费学习笔记（深入）”；

代码结构及分析:

办公小浣熊

办公小浣熊是基于商汤大语言模型的原生数据分析产品，

77

查看详情

公共模块@ht/common包含路由配置（route.js）、组件（index.vue）和安装函数（install.js）。route.js创建并导出路由实例；index.vue使用useRouter()和useRoute()，但useRouter()返回undefined；install.js安装公共模块，并使用已创建的路由实例。

系统模块system依赖@ht/common，并在main.js中调用CommonInstall函数，同时拥有自身路由配置（router.js）。

common/package.json和system/package.json都（间接）依赖vue-router ^4.3.3版本。

解决方案: yarn link @ht/common成功的原因在于它避免了vue-router的重复安装。 这提示我们需要解决模块依赖管理问题，确保所有模块使用同一个vue-router版本。

建议: 为了避免类似问题，建议公共模块避免直接导出和使用vue-router实例。公共模块应专注于可复用组件和功能，路由配置应在使用模块中完成。 如果公共模块需要路由功能，建议将路由逻辑封装成函数或服务，并由调用者传入路由实例。 这可以提高代码的可维护性和避免依赖冲突。

以上就是Vue3项目中引入公共模块后，useRouter()返回undefined是什么原因？的详细内容，更多请关注php中文网其它相关文章！