如何配置导航栏映射现有页面而非分组 修复菜单项跳转登录异常

当前主页包含可折叠导航栏、主页导航卡片两个模块：

• 「Računi」导航菜单下配置了2个可正常访问的有效子页面
• 「RAČUNI」是菜单父级分组项，仅做样式展示，未关联任何跳转页面
• 异常表现：点击卡片区域内的「RAČUNI」父项时，页面直接重定向到工作区登录界面，预期效果为导航栏父项仅做分组使用，正常映射现有子页面，不触发异常跳转。

1. 修正父级菜单项的标签属性 #

这类问题90%是父级菜单项默认渲染为带空地址/根地址的<a>标签导致的：点击空href的a标签会触发页面默认刷新/跳转逻辑，如果全局路由鉴权没有放行根路径/空路径，就会直接把用户踢到登录页。

• 原生实现：把父级「RAČUNI」的a标签href属性改为javascript:void(0)，或者直接替换为<span>标签承载分组标题

  <!-- 异常写法：未配置地址的a标签会触发默认跳转 -->
  <a href="">RAČUNI</a>
  <!-- 修复写法 -->
  <a href="javascript:void(0)" class="nav-group-title">RAČUNI</a>
  

• 框架实现：如果是Vue/React路由配置，父级路由不要配置path/redirect属性，仅保留children子路由数组即可；如果是用Element、AntD这类组件库，父级菜单项不要传to/index跳转属性，组件会自动将其识别为分组触发器。

2. 拦截父项的默认点击事件 #

如果不方便修改现有DOM/路由配置，直接给父级菜单项绑定点击事件，阻止默认跳转行为和事件冒泡，仅保留展开/收起子菜单的逻辑：

const racuniParent = document.querySelector('.nav-parent-item.racuni')
racuniParent.addEventListener('click', (e) => {
  e.preventDefault() // 阻止a标签默认跳转
  e.stopPropagation() // 阻止事件冒泡到卡片容器的点击监听
  // 下方仅写子菜单展开收起逻辑即可，不要加路由跳转相关代码
  e.currentTarget.classList.toggle('expand')
})

3. 排查路由鉴权白名单 #

检查全局路由守卫/页面鉴权逻辑，如果父级菜单项默认绑定的根路径/没有加入白名单，会被鉴权逻辑判定为未登录状态直接重定向到登录页，把导航分组项的触发路径加入白名单即可——更推荐直接去掉父项的路由关联，从根源避免触发鉴权拦截。

内容的提问来源于stack exchange，提问作者FĐŠ