# Vue.js 页面跳转空白问题 (2025-08-04 01:16Z)
_**User**_
@/parameter @/basicPublicTemplate @/nutritionEducationTemplate @index.vue 为什么只要加载了这个页面以后，其它的所有页面会全部变成一片空白？并且，从其他页面回来时也会出现这个一片空白的情况？
---
_**Assistant**_
Thought Process
用户反映了一个严重的问题：加载 `src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue` 页面后，其他所有页面都会变成空白，并且从其他页面回来时也会出现这个问题。
这种问题通常是由以下几个原因引起的：
1. JavaScript 错误导致整个应用崩溃
2. 组件中的无限循环或死循环
3. 内存泄漏
4. 全局状态被错误修改
5. 路由配置问题
6. 组件卸载时没有正确清理资源
让我先查看这个页面的代码，分析可能的问题。从linter错误来看，有一些导入模块找不到的问题，但这通常不会导致整个应用崩溃。
从代码来看，我注意到几个可能的问题点：
1. 在 `getList` 函数中，有一个遍历 `treeData.value` 的操作，但如果 `treeData` 的结构不正确，可能会导致问题
2. `showTooltip` 和 `hideTooltip` 函数操作DOM，可能会有问题
3. `onMounted` 中同时调用了 `getList()` 和 `getDeptList()`，可能存在竞态条件
让我深入分析代码，特别关注可能导致全局问题的部分。Thought Process
看起来搜索没有找到相关的API文件。让我直接检查API目录结构，确认导入路径是否正确。
Listed directory src/api/parameter • **1** results
| Name |
|-------|
| 📁 `basicPublicTemplate` |
---
Thought Process
让我继续查看basicPublicTemplate目录下的内容。
Listed directory src/api/parameter/basicPublicTemplate • **3** results
| Name |
|-------|
| 📁 `nutritionEducationTemplate` |
| 📁 `consultantResultTemplateType` |
| 📁 `consultantResultTemplate` |
---
Thought Process
看起来目录结构是存在的。让我查看nutritionEducationTemplate目录下的具体文件。
Listed directory src/api/parameter/basicPublicTemplate/nutritionEducationTemplate • **2** results
| Name |
|-------|
| 📄 `index.ts` |
| 📄 `types.ts` |
---
Thought Process
好的，API文件是存在的。让我检查这些API文件的内容，看看是否有问题。同时也要检查路由配置和其他可能导致应用崩溃的问题。Thought Process
API文件看起来是正常的。现在让我分析一下原始页面代码中可能导致应用崩溃的问题。我注意到几个潜在的问题：
1. 在`getList`函数中，有一个遍历`treeData.value`的循环，但这个时候`treeData`可能还没有被正确初始化
2. `onMounted`中同时调用了`getList()`和`getDeptList()`，存在竞态条件
3. tooltip的DOM操作可能有问题
让我检查一下路由配置和其他组件是否有问题。Thought Process
用户没有选择运行这个命令。我需要直接分析代码中的问题。让我仔细检查营养宣教模板页面的代码，找出可能导致应用崩溃的原因。
从代码分析来看，我发现了一些潜在的问题：
1. 在`getList`函数中，第166-183行，代码试图访问`treeData.value`并进行遍历，但是此时`getDeptList()`可能还没有完成执行，导致`treeData.value`为空或未定义
2. `onMounted`中同时调用了两个异步函数，存在竞态条件
3. tooltip的实现方式可能有问题
让我提供修复方案。Edit file: src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue
修复竞态条件和空值访问问题，确保页面不会崩溃
**Chunk 1**
Lines added: 6, lines removed: 11
```diff
@@ -166,19 +166,14 @@
const getList = async () => {
loading.value = true;
+ try {
const res = await listEducationTemplate(queryParams.value);
educationTemplateList.value = res.rows;
-
- // 获取部门数据
- const deptMap = new Map();
- treeData.value.forEach(dept => {
- deptMap.set(dept.deptId, dept.deptName);
- if (dept.children) {
- dept.children.forEach(child => {
- deptMap.set(child.deptId, child.deptName);
- });
- }
- });
total.value = res.total;
+ } catch (error) {
+ console.error('获取营养宣教模板列表失败:', error);
+ proxy?.$modal.msgError("获取数据失败");
+ } finally {
loading.value = false;
+ }
}
```
Thought Process
好的，我移除了`getList`中对`treeData.value`的不安全访问。现在让我修复`onMounted`中的竞态条件问题，确保先获取部门数据再获取列表数据。Edit file: src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue
修复onMounted中的竞态条件，先获取部门数据再获取列表数据
**Chunk 1**
Lines added: 7, lines removed: 3
```diff
@@ -265,7 +265,11 @@
}
- onMounted(() => {
- getList();
- getDeptList();
+ onMounted(async () => {
+ try {
+ await getDeptList();
+ await getList();
+ } catch (error) {
+ console.error('页面初始化失败:', error);
+ }
});
```
Thought Process
现在让我修复types文件，添加页面中使用的字段定义。Edit file: src/api/parameter/basicPublicTemplate/nutritionEducationTemplate/types.ts
在EducationTemplateVO接口中添加页面使用的缺失字段
**Chunk 1**
Lines added: 30, lines removed: undefined
```diff
@@ -36,4 +36,34 @@
*/
updateDept: number;
+
+ /**
+ * 创建时间
+ */
+ createTime: string;
+
+ /**
+ * 创建人姓名
+ */
+ createByUser: string;
+
+ /**
+ * 创建人科室
+ */
+ createDeptName: string;
+
+ /**
+ * 最后编辑时间
+ */
+ updateTime: string;
+
+ /**
+ * 最后编辑人姓名
+ */
+ updateByUser: string;
+
+ /**
+ * 最后编辑人科室
+ */
+ updateDeptName: string;
}
```
Thought Process
现在让我修复showTooltip函数中可能存在的DOM操作问题，确保它更安全。Edit file: src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue
修复showTooltip函数，添加安全检查防止DOM操作错误
**Chunk 1**
Lines added: 2, lines removed: undefined
```diff
@@ -148,4 +148,6 @@
const showTooltip = (event: MouseEvent, content: string) => {
+ if (!event.target || !content) return;
+
const target = event.target as HTMLElement;
const rect = target.getBoundingClientRect();
```
Thought Process
现在让我添加一个清理函数，确保组件卸载时正确清理tooltip。Edit file: src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue
在onMounted后添加onUnmounted清理函数
**Chunk 1**
Lines added: 5, lines removed: undefined
```diff
@@ -275,4 +275,9 @@
}
});
+
+ onUnmounted(() => {
+ // 清理tooltip
+ hideTooltip();
+ });
```
Thought Process
现在让我检查一下是否有其他可能导致问题的代码片段，特别是删除和错误处理函数。Edit file: src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue
修复handleDelete函数，添加更好的错误处理
**Chunk 1**
Lines added: 10, lines removed: 1
```diff
@@ -254,8 +254,17 @@
const handleDelete = async (row?: EducationTemplateVO) => {
const _ids = row?.id || ids.value;
- await proxy?.$modal.confirm('是否确认删除营养宣教模板编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+ try {
+ await proxy?.$modal.confirm('是否确认删除营养宣教模板编号为"' + _ids + '"的数据项？');
await delEducationTemplate(_ids);
proxy?.$modal.msgSuccess("删除成功");
await getList();
+ } catch (error) {
+ console.error('删除失败:', error);
+ if (error !== 'cancel') {
+ proxy?.$modal.msgError("删除失败");
+ }
+ } finally {
+ loading.value = false;
+ }
}
```