130 lines
3.4 KiB
Markdown
130 lines
3.4 KiB
Markdown
# 首页导航跳转问题分析与解决方案
|
||
|
||
## 问题现象
|
||
|
||
接口请求完成之前，首页的导航菜单无法跳转；接口请求完成后，导航跳转正常。
|
||
|
||
---
|
||
|
||
## 问题根源
|
||
|
||
### 核心问题：SideBarMenu.vue 的页面刷新逻辑
|
||
|
||
```javascript
|
||
// 问题代码（已修复）
|
||
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
|
||
setTimeout(() => {
|
||
router.go(0); // 触发页面刷新！
|
||
}, 200);
|
||
}
|
||
```
|
||
|
||
当动态路由还没添加完成时，这个条件会触发页面不断刷新，导致导航不可用。
|
||
|
||
---
|
||
|
||
## 已完成的修复
|
||
|
||
### 1. 修改 `src/store/modules/permission.js`
|
||
|
||
**修改内容**：优化 `routeReady` 状态管理（0: 未开始 → 1: 进行中 → 2: 完成）
|
||
|
||
```javascript
|
||
actions: {
|
||
filterRoutes(context, menus) {
|
||
// 开始处理，标记为进行中
|
||
context.commit('setRouteReady', 1);
|
||
|
||
let routes = [];
|
||
if (menus && menus.length > 0) {
|
||
routes = filter(privateRoutes, menus);
|
||
}
|
||
routes.push({ path: '/:catchAll(.*)', redirect: '/404' });
|
||
|
||
context.commit('setRoutes', routes);
|
||
// 处理完成，标记为已完成
|
||
context.commit('setRouteReady', 2); // ← 新增：完成时设为 2
|
||
|
||
return routes;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 修改 `src/permission.js`
|
||
|
||
**修改内容**：移除了在路由守卫开始时设置 `setRouteReady(1)` 的代码，让 `filterRoutes` action 统一管理状态。
|
||
|
||
### 3. 修改 `src/layout/components/SideBar/SideBarMenu.vue`
|
||
|
||
**修改内容**：移除自动刷新页面的逻辑，改为监听路由加载状态
|
||
|
||
```javascript
|
||
// 原代码（已移除）：
|
||
// if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
|
||
// store.commit("user/setIsReady", {});
|
||
// setTimeout(() => {
|
||
// router.go(0);
|
||
// }, 200);
|
||
// }
|
||
|
||
// 新代码：监听路由加载完成状态
|
||
if (store.state.permission.routeReady !== 2) {
|
||
const unwatch = watch(
|
||
() => store.state.permission.routeReady,
|
||
(val) => {
|
||
if (val === 2) {
|
||
unwatch();
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
}
|
||
```
|
||
|
||
### 4. 修改 `src/utils/route.js`
|
||
|
||
**修改内容**：添加空值安全检查，避免 `deptId` 或 `roleList` 为空时报错
|
||
|
||
```javascript
|
||
// 原代码（可能报错）：
|
||
// const { deptBizType, deptLevel } = getItem('deptId')[0]
|
||
|
||
// 新代码（安全）：
|
||
const deptIdData = getItem('deptId');
|
||
const deptInfo = deptIdData && deptIdData.length > 0 ? deptIdData[0] : {};
|
||
const deptBizType = deptInfo.deptBizType || '';
|
||
const deptLevel = deptInfo.deptLevel || '';
|
||
const roleListData = getItem('roleList') || [];
|
||
const roleList = roleListData.filter(item => item.roleCode == 'JS_666666').length > 0;
|
||
const xjLsit = roleListData.filter(item => item.roleCode == 'JS_999999').length > 0;
|
||
```
|
||
|
||
---
|
||
|
||
## 修复后的流程
|
||
|
||
```
|
||
登录成功 → window.location.href = '/' → 页面加载
|
||
↓
|
||
permission.js 路由守卫执行
|
||
↓
|
||
filterRoutes 开始执行 → routeReady = 1（进行中）
|
||
↓
|
||
动态路由添加完成 → routeReady = 2（完成）
|
||
↓
|
||
SideBarMenu.vue 监听到 routeReady === 2
|
||
↓
|
||
导航菜单正常渲染，可以跳转
|
||
```
|
||
|
||
---
|
||
|
||
## 修复文件列表
|
||
|
||
| 文件路径 | 修改内容 |
|
||
|---------|---------|
|
||
| `src/store/modules/permission.js` | 优化 routeReady 状态管理（0→1→2） |
|
||
| `src/permission.js` | 移除重复的 setRouteReady 调用 |
|
||
| `src/layout/components/SideBar/SideBarMenu.vue` | 移除自动刷新逻辑，改为监听状态 |
|
||
| `src/utils/route.js` | 添加空值安全检查 |
|