Soybean Admin项目中路由初始化问题的解决方案

问题背景

在使用Soybean Admin项目(v1.1.0)进行二次开发时，开发者可能会遇到一个典型的路由初始化问题。当用户登录后刷新页面，系统会抛出"router is undefined"的错误，导致页面无法正常渲染。这种情况通常发生在项目采用模块化架构设计时，特别是在初始化静态路由的过程中。

问题分析

该问题的核心在于路由初始化的时机和路由实例的获取方式。在项目的模块化结构中，开发者往往会：

1. 在main.ts中先初始化各个模块
2. 然后再设置路由(setupRouter)
3. 模块初始化过程中可能会调用tabStore.initHomeTab()方法
4. 此时如果使用useRouter()获取路由实例，就会失败

这是因为useRouter()是Vue Router的组合式API，它依赖于Vue应用上下文，而在模块初始化阶段，Vue应用可能还未完全建立，导致路由实例不可用。

解决方案

针对这个问题，最直接有效的解决方案是修改路由实例的获取方式：

在src/store/modules/tab/index.ts文件中，将原有的：

import { useRouter } from 'vue-router';

替换为：

import { router } from '@/router';

这种修改之所以有效，是因为：

1. 直接导入router实例不依赖Vue应用上下文
2. @/router中导出的router实例是独立创建的路由对象
3. 这种方式在任何初始化阶段都可用

深入理解

两种路由获取方式的区别

1. useRouter()：

   • 是Vue Router提供的组合式API
   • 必须在setup()或