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的重复安装问题。
立即学习“前端免费学习笔记（深入）”；
代码结构及分析:
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
公共模块@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实例。公共模块应专注于可复用组件和功能，路由配置应在使用模块中完成。 如果公共模块需要路由功能，建议将路由逻辑封装成函数或服务，并由调用者传入路由实例。 这可以提高代码的可维护性和避免依赖冲突。
