子菜单为顶部TOP_MENU 无法打开对应路由的页面，

kiwimg commented 1 year ago

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

[ ] 已阅读文档.
[ ] 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
[ ] 已在 Issues 中搜索了相关的关键词
[ ] 不是 ant design vue 组件库的 Bug

描述 Bug

代码分支：vue-vben-admin-thin master 分支无此问题 // Menu mode mode: MenuModeEnum.HORIZONTAL, // Menu type type: MenuTypeEnum.TOP_MENU,

子菜单无法打开对应路由的页面，但是通过设置为 VERTICAL 就可以了打开

复现 Bug

// Menu configuration menuSetting: { // sidebar menu bg color bgColor: SIDE_BAR_BG_COLOR_LIST[0], // Whether to fix the left menu fixed: true, // Menu collapse collapsed: false, // When sider hide because of the responsive layout siderHidden: false, // Whether to display the menu name when folding the menu collapsedShowTitle: false, // Whether it can be dragged // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu canDrag: false, // Whether to show no dom show: true, // Whether to show dom hidden: false, // Menu width menuWidth: 210, // Menu mode mode: MenuModeEnum.INLINE, // Menu type type: MenuTypeEnum.TOP_MENU, // Menu theme theme: ThemeEnum.DARK, // Split menu split: false, // Top menu layout topMenuAlign: 'start', // Fold trigger position trigger: TriggerEnum.HEADER, // Turn on accordion mode, only show a menu accordion: true, // Switch page to close menu closeMixSidebarOnChange: false, // Module opening method ‘click’ |'hover' mixSideTrigger: MixSidebarTriggerEnum.CLICK, // Fixed expanded menu mixSideFixed: false, },

系统信息

操作系统: windows
Node 版本: 16
包管理器 (npm/yarn/pnpm) 及其版本: 最新

dongfangchubai commented 1 year ago

这个问题解决了吗，我不太确定这个是bug还是其他配置问题。我是这样解决的：分析源码发现src/layouts/menu/index.vue中侧边菜单和顶部菜单是两个不同的组件

function renderMenu() {
        const { menus, ...menuProps } = unref(getCommonProps)
        // console.log(menus);
        if (!menus || !menus.length) return null
        return !props.isHorizontal ? (
          <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
        ) : (
          <BasicMenu
            {...(menuProps as any)}
            isHorizontal={props.isHorizontal}
            type={unref(getMenuType)}
            showLogo={unref(getIsShowLogo)}
            mode={unref(getComputedMenuMode as any)}
            items={menus}
          />
        )
      }

顶部菜单组件中，菜单组件使用的ant-design-vue中的Menu组件，组件的click事件的回调参数如下：

而侧边菜单使用的是src/components/SimpleMenu/src/components/menu.vue，这个组件的点击事件的参数是一个路由字符串最终导致在进行路由跳转时出了问题

所以我是这样处理的

async function handleMenuClick(key) {
        const path = key.key
        const { beforeClickFn } = props
        if (beforeClickFn && isFunction(beforeClickFn)) {
          const flag = await beforeClickFn(path)
          if (!flag) return
        }
        emit('menuClick', path)

        isClickGo.value = true
        menuState.selectedKeys = [path]
      }

希望对你有帮助

zjx9772 commented 1 year ago

1683187103932

修改Menu组件下的BasicMenu.vue文件

kiwimg commented 1 year ago

谢谢，可以了

likui628 commented 1 year ago

vue-vben-admin-thin不维护了，在vue-vben-admin最新版本上试一下

vbenjs / vue-vben-admin