## 问题解决总结

### 一、问题根源

点击"单位库"子菜单时，URL会先跳转到 /unitManagementRepository ，然后快速跳转到 /gridAddress 。

根本原因是事件冒泡 ：

1. 点击子菜单时，先触发 el-menu 的 @select 事件，执行路由跳转到对应页面

2. 由于事件冒泡，点击事件会传递到父级 el-submenu ，触发 @click.native 事件，又跳转到默认页面

### 二、解决方案

第一步：重构菜单事件处理

- 使用 Element UI 的 @select 事件（菜单选择的标准事件）处理所有子菜单点击

- 将之前分散的 handleMenuItemClick 和 handleSubmenuClick 合并为统一的 handleMenuSelect 方法

第二步：处理一级菜单点击

- 为 el-submenu 添加 @click.native 事件监听一级菜单点击

- 在处理函数中添加判断逻辑， 只有点击一级菜单标题时才执行跳转 ，点击子菜单项时不执行任何操作：

```

handleSubmenuTitleClick(index, event) {

  const target = event.target;

  const isMenuItem = target.closest('.

  el-menu-item');

  if (!isMenuItem) {

    // 只有点击一级菜单标题时才跳转

    this.$router.push({ path: "/

    gridAddress", query: { t: Date.now

    () } });

  }

}

```

### 三、为什么要加 query: { t: Date.now() }

这是为了 强制路由刷新 。Vue Router 默认会复用组件实例来优化性能，但有时会导致：

- 同一路由切换时页面不更新

- 组件的生命周期钩子（如 mounted ）不触发

添加时间戳参数后：

- 每次跳转的 URL 都是唯一的（因为时间戳不同）

- 强制 Vue Router 认为这是一个新的路由导航

- 确保页面组件被正确重建和渲染

### 最终效果

- 点击"单位管理"一级菜单：展开子菜单并跳转到"标准地址库"

- 点击"标准地址库"子菜单：跳转到 /gridAddress 页面

- 点击"单位库"子菜单：跳转到 /unitManagementRepository 页面（不再被覆盖）