如何创建一个没有子菜单的顶层菜单，关联一个页面

[CharellKing]

export default {
path: 'test',
name: 'Test',
component: () => import('@/views/test/index.vue'),
meta: {
locale: 'menu.test',
requiresAuth: true,
icon: 'icon-book',
order: 0,
},
};

即使 test component 组件是有内容的，http://localhost:3000/test 页面显示是空的； 我看了一下 acro-design-pro的所有的菜单必须有子菜单，只有这样才能OK么？

[hehehai]

@CharellKing 你好，可以参考这个 #930 (comment)

[CharellKing]

我看到过这个帖子，这个帖子是关于隐藏菜单的，我这里并不需要隐藏；我这里只是想将某个menu和view的路由关联起来，而这个menu是没有子菜单的；尝试了一下，都失败了；根本不能点击menu，以及menu相关页面，也是空的。

[hehehai]

@CharellKing 嗯，方便贴下route代码和菜单的截图嘛？

[CharellKing]

[CharellKing]

menu.test menu 点击没有反应

[hehehai]

@CharellKing 嗯，这是 arco-design-pro 菜单设计的问题

https://github.com/arco-design/arco-design-pro-vue/blob/ebf5e18aedd284c5e411bde850646e355d56b23e/arco-design-pro-vite/src/components/menu/index.vue#L98-L129

可以调整一下menu 的层级渲染

const renderSubMenu = () => {
      function travel(_route: RouteRecordRaw[], nodes = []) {
        if (_route) {
          _route.forEach((element) => {
            // This is demo, modify nodes as needed
            const icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
            const r = element?.children ? (
              <a-sub-menu
                key={element?.name}
                v-slots={{
                  icon: () => h(compile(icon)),
                  title: () => h(compile(t(element?.meta?.locale || ''))),
                }}
              >
                {travel(element?.children)}
              </a-sub-menu>
            ) : (
              <a-menu-item key={element.name} onClick={() => goto(element)}>
                {t(element?.meta?.locale || '')}
                {travel(element.children ?? [])}
              </a-menu-item>
            );
            nodes.push(r as never);
          });
        }
        return nodes;
      }
      return travel(menuTree.value);
    };

#930 (comment)

[CharellKing]

现在test menu 可以点击，并路由到http://localhost:3000/test;但是http://localhost:3000/test显示为空，没有显示helloworld

[hehehai]

@CharellKing 嗯，这里是需要 route-view 的，可参考其他页面的写法，或查看 vue router

[CharellKing]

顶层没有图标

[hehehai]

顶层没有图标

@CharellKing

const renderSubMenu = () => {
      function travel(_route: RouteRecordRaw[], nodes = []) {
        if (_route) {
          _route.forEach((element) => {
            // This is demo, modify nodes as needed
            const icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
            const r = element?.children ? (
              <a-sub-menu
                key={element?.name}
                v-slots={{
                  icon: () => h(compile(icon)),
                  title: () => h(compile(t(element?.meta?.locale || ''))),
                }}
              >
                {travel(element?.children)}
              </a-sub-menu>
            ) : (
              <a-menu-item 
				key={element.name} 
				v-slots={{
                  icon: () => h(compile(icon))
                }} 
				onClick={() => goto(element)}
			  >
                {t(element?.meta?.locale || '')}
                {travel(element.children ?? [])}
              </a-menu-item>
            );
            nodes.push(r as never);
          });
        }
        return nodes;
      }
      return travel(menuTree.value);
    };

[CharellKing]

@CharellKing 嗯，这里是需要 route-view 的，可参考其他页面的写法，或查看 vue router
如果是参考其他的页面的写法，其他的页面的router-view放到顶层menu的index中；我如此加了一下，似乎不生效，

<template>
  <router-view>
  <div class="container">
      <p>helloworld</p>
  </div>
  </router-view>
</template>

<script lang="ts" setup>
</script>

<script lang="ts">
  export default {
    name: 'Test',
  };
</script>

[sulimi]

哈喽，我也遇到了这个问题，而且icon不显示

[hehehai]

@sulimi 你好，新版本已支持改功能

https://github.com/arco-design/arco-design-pro-vue/blob/main/docs/changelog.zh-CN.md

若旧版本要升级支持该功能，可以参考这个pr进行升级 https://github.com/arco-design/arco-design-pro-vue/pull/59/files

[nightost]

https://github.com/arco-design/arco-design-pro-vue/pull/59/files

但是添加的路由component如何继承default-layout

官方的链接

给出的link并没有指明如何配置

[xuhongwei]

@nightost
我目前是这么配置的：

1. 外层菜单增加配置hideChildrenInMenu: true，隐藏子菜单
2. 外层菜单增加配置redirect: '/dashboard/workplace'， 点击后跳转到目标子菜单
3. children 目标子菜单中增加配置 activeMenu: 'dashboard', 更改选中后的一级菜单选中状态

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const DASHBOARD: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'dashboard',
  component: DEFAULT_LAYOUT,
  redirect: '/dashboard/workplace',
  meta: {
    locale: '工作台',
    requiresAuth: false,
    icon: 'icon-dashboard',
    order: 0,
    hideChildrenInMenu: true,
  },
  children: [
    {
      path: 'workplace',
      name: 'workplace',
      component: () => import('@/views/workplace/index.vue'),
      meta: {
        locale: '工作台',
        activeMenu: 'dashboard',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],
};

export default DASHBOARD;

[Jonyon]

@nightost 我目前是这么配置的：

1. 外层菜单增加配置hideChildrenInMenu: true，隐藏子菜单
2. 外层菜单增加配置redirect: '/dashboard/workplace'， 点击后跳转到目标子菜单
3. children 目标子菜单中增加配置 activeMenu: 'dashboard', 更改选中后的一级菜单选中状态

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const DASHBOARD: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'dashboard',
  component: DEFAULT_LAYOUT,
  redirect: '/dashboard/workplace',
  meta: {
    locale: '工作台',
    requiresAuth: false,
    icon: 'icon-dashboard',
    order: 0,
    hideChildrenInMenu: true,
  },
  children: [
    {
      path: 'workplace',
      name: 'workplace',
      component: () => import('@/views/workplace/index.vue'),
      meta: {
        locale: '工作台',
        activeMenu: 'dashboard',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],
};

export default DASHBOARD;

2024年了，有简单的解决办法了吗？

[mingzhou]

@nightost 我目前是这么配置的：

1. 外层菜单增加配置hideChildrenInMenu: true，隐藏子菜单
2. 外层菜单增加配置redirect: '/dashboard/workplace'， 点击后跳转到目标子菜单
3. children 目标子菜单中增加配置 activeMenu: 'dashboard', 更改选中后的一级菜单选中状态

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const DASHBOARD: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'dashboard',
  component: DEFAULT_LAYOUT,
  redirect: '/dashboard/workplace',
  meta: {
    locale: '工作台',
    requiresAuth: false,
    icon: 'icon-dashboard',
    order: 0,
    hideChildrenInMenu: true,
  },
  children: [
    {
      path: 'workplace',
      name: 'workplace',
      component: () => import('@/views/workplace/index.vue'),
      meta: {
        locale: '工作台',
        activeMenu: 'dashboard',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],
};

export default DASHBOARD;

这个可以在菜单栏处看起来像是一级菜单了。
但是在页签的地方，还是会显示成二级菜单："/数据可视化/分析页"
最好能直接显示成"/分析页"