导航

[1105065844]

• [ ] I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: [email protected]
• Browser: chrome114.0.0.0

What is expected?

希望支持一级菜单以及选中高亮

Steps to reproduce

只有一级菜单时component指向DEFAULT_LAYOUT，怎么展示页面呢？若使用redirect重定向导航不会高亮

[Wjinlei]

你这个需求我之前刚好遇到了，下面是我的修改，你看看 src/components/menu/index.vue

      return () => (
        <a-menu
          mode={topMenu.value ? 'horizontal' : 'vertical'}
          v-model:collapsed={collapsed.value}
          v-model:open-keys={openKeys.value}
          auto-open={false}
          selected-keys={[route.matched[1].name]}  <-- 这里修改成这样
          auto-open-selected={true}
          level-indent={34}
          style="height: 100%;width:100%;"
          onCollapse={setCollapse}
        >
          {renderSubMenu()}
        </a-menu>
      );

[1105065844]

你这个需求我之前刚好遇到了，下面是我的修改，你看看 src/components/menu/index.vue

      return () => (
        <a-menu
          mode={topMenu.value ? 'horizontal' : 'vertical'}
          v-model:collapsed={collapsed.value}
          v-model:open-keys={openKeys.value}
          auto-open={false}
          selected-keys={[route.matched[1].name]}  <-- 这里修改成这样
          auto-open-selected={true}
          level-indent={34}
          style="height: 100%;width:100%;"
          onCollapse={setCollapse}
        >
          {renderSubMenu()}
        </a-menu>
      );

路由定义时子组件和父组件name相同，这样写确实可以高亮显示。谢谢

[Wjinlei]

你这个需求我之前刚好遇到了，下面是我的修改，你看看 src/components/menu/index.vue

      return () => (
        <a-menu
          mode={topMenu.value ? 'horizontal' : 'vertical'}
          v-model:collapsed={collapsed.value}
          v-model:open-keys={openKeys.value}
          auto-open={false}
          selected-keys={[route.matched[1].name]}  <-- 这里修改成这样
          auto-open-selected={true}
          level-indent={34}
          style="height: 100%;width:100%;"
          onCollapse={setCollapse}
        >
          {renderSubMenu()}
        </a-menu>
      );

路由定义时子组件和父组件name相同，这样写确实可以高亮显示。谢谢

给你推荐个做法，你把src/router/index.ts修改一下，然后所有的路由就都是相对于/路径的子路由了

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 之前对于 / 的路由修改成这样 begin
    {
      path: '/',
      // redirect: 'login',
      name: 'root',
      component: DEFAULT_LAYOUT,
      redirect: 'console', // 这里可以重定向到你想要的路由
      meta: {
        requiresAuth: true,
      },
      children: [...appRoutes],
    },
    // 之前对于 / 的路由修改成这样 end
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        requiresAuth: false,
      },
    },
    // ...appRoutes,  // 这里注释
    REDIRECT_MAIN,
    NOT_FOUND_ROUTE,
  ],
  scrollBehavior() {
    return { top: 0 };
  },
});

然后你就只需要在src/router/routes/modules/ 目录下添加你的子路由配置就行了，例如console.ts

import MenuConsole from '@/assets/icons/menu/console.svg?raw';
import { AppRouteRecordRaw } from '../types';

const CONSOLE: AppRouteRecordRaw = {
  path: 'console',
  name: 'console',
  component: () => import('@/views/console/index.vue'),
  meta: {
    locale: 'menu.console',
    icon: MenuConsole,
    order: 0,
    requiresAuth: true,
    roles: ['*'],
  },
};

export default CONSOLE;

这样做，你的路由name也不必相同，它依然能够高亮显示。因为它总是显示路由表中的二级路由route.matched[1].name，也就是你定义的子组件。

[ykdiy]

你这个需求我之前刚好遇到了，下面是我的修改，你看看 src/components/menu/index.vue

      return () => (
        <a-menu
          mode={topMenu.value ? 'horizontal' : 'vertical'}
          v-model:collapsed={collapsed.value}
          v-model:open-keys={openKeys.value}
          auto-open={false}
          selected-keys={[route.matched[1].name]}  <-- 这里修改成这样
          auto-open-selected={true}
          level-indent={34}
          style="height: 100%;width:100%;"
          onCollapse={setCollapse}
        >
          {renderSubMenu()}
        </a-menu>
      );

路由定义时子组件和父组件name相同，这样写确实可以高亮显示。谢谢

给你推荐个做法，你把src/router/index.ts修改一下，然后所有的路由就都是相对于/路径的子路由了

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 之前对于 / 的路由修改成这样 begin
    {
      path: '/',
      // redirect: 'login',
      name: 'root',
      component: DEFAULT_LAYOUT,
      redirect: 'console', // 这里可以重定向到你想要的路由
      meta: {
        requiresAuth: true,
      },
      children: [...appRoutes],
    },
    // 之前对于 / 的路由修改成这样 end
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        requiresAuth: false,
      },
    },
    // ...appRoutes,  // 这里注释
    REDIRECT_MAIN,
    NOT_FOUND_ROUTE,
  ],
  scrollBehavior() {
    return { top: 0 };
  },
});

然后你就只需要在src/router/routes/modules/ 目录下添加你的子路由配置就行了，例如console.ts

import MenuConsole from '@/assets/icons/menu/console.svg?raw';
import { AppRouteRecordRaw } from '../types';

const CONSOLE: AppRouteRecordRaw = {
  path: 'console',
  name: 'console',
  component: () => import('@/views/console/index.vue'),
  meta: {
    locale: 'menu.console',
    icon: MenuConsole,
    order: 0,
    requiresAuth: true,
    roles: ['*'],
  },
};

export default CONSOLE;

这样做，你的路由name也不必相同，它依然能够高亮显示。因为它总是显示路由表中的二级路由route.matched[1].name，也就是你定义的子组件。

赞,有用,效果很好