Vue.js 页面跳转空白问题 (2025-08-04 01:16Z)

User

@/parameter @/basicPublicTemplate @/nutritionEducationTemplate @index.vue 为什么只要加载了这个页面以后，其它的所有页面会全部变成一片空白？并且，从其他页面回来时也会出现这个一片空白的情况？

Assistant

Thought Process

用户反映了一个严重的问题：加载 src/views/parameter/basicPublicTemplate/nutritionEducationTemplate/index.vue 页面后，其他所有页面都会变成空白，并且从其他页面回来时也会出现这个问题。

这种问题通常是由以下几个原因引起的：

JavaScript 错误导致整个应用崩溃
组件中的无限循环或死循环
内存泄漏
全局状态被错误修改
路由配置问题
组件卸载时没有正确清理资源

让我先查看这个页面的代码，分析可能的问题。从linter错误来看，有一些导入模块找不到的问题，但这通常不会导致整个应用崩溃。

从代码来看，我注意到几个可能的问题点：

在 getList 函数中，有一个遍历 treeData.value 的操作，但如果 treeData 的结构不正确，可能会导致问题
showTooltip 和 hideTooltip 函数操作DOM，可能会有问题
onMounted 中同时调用了 getList() 和 getDeptList()，可能存在竞态条件

让我深入分析代码，特别关注可能导致全局问题的部分。

我来分析这个问题。这种"一片空白"的情况通常是由JavaScript错误导致整个Vue应用崩溃造成的。让我检查一下代码中可能导致这个问题的原因。

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文件的内容，看看是否有问题。同时也要检查路由配置和其他可能导致应用崩溃的问题。

Read file: src/api/parameter/basicPublicTemplate/nutritionEducationTemplate/index.ts

Read file: src/api/parameter/basicPublicTemplate/nutritionEducationTemplate/types.ts

Thought Process

API文件看起来是正常的。现在让我分析一下原始页面代码中可能导致应用崩溃的问题。我注意到几个潜在的问题：

在getList函数中，有一个遍历treeData.value的循环，但这个时候treeData可能还没有被正确初始化
onMounted中同时调用了getList()和getDeptList()，存在竞态条件
tooltip的DOM操作可能有问题

让我检查一下路由配置和其他组件是否有问题。

echo "请检查浏览器开发者工具的Console选项卡是否有错误信息"

Thought Process

用户没有选择运行这个命令。我需要直接分析代码中的问题。让我仔细检查营养宣教模板页面的代码，找出可能导致应用崩溃的原因。

从代码分析来看，我发现了一些潜在的问题：

在getList函数中，第166-183行，代码试图访问treeData.value并进行遍历，但是此时getDeptList()可能还没有完成执行，导致treeData.value为空或未定义
onMounted中同时调用了两个异步函数，存在竞态条件
tooltip的实现方式可能有问题

让我提供修复方案。

分析代码后，我发现了导致页面空白的几个关键问题。主要原因是代码中存在一些会导致JavaScript错误的问题：

问题分析

竞态条件问题: 在 onMounted 中同时调用了 getList() 和 getDeptList()，但 getList() 中尝试访问 treeData.value，而此时 getDeptList() 可能还没完成
空值访问问题: 在 getList() 函数中直接遍历 treeData.value，没有进行空值检查
EducationTemplateVO类型缺少字段: types文件中缺少页面中使用的一些字段定义

让我修复这些问题：

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; + } } ```

2025-08-04_01-16Z-vue-js-页面跳转空白问题.md 10 KB Historie Surový

Vue.js 页面跳转空白问题 (2025-08-04 01:16Z)

问题分析

2025-08-04_01-16Z-vue-js-页面跳转空白问题.md 10 KB

Historie Surový