请教这样的动态路由菜单怎么配置？

[klgd]

菜单样式： 一级菜单 /tools -- 二级菜单1 /tools/abc -- 二级菜单2 /tools/def

二级菜单 都是动态路由tools/:id的带参菜单 跟官方demo中的tab带参类似，但是我像实现的是二级菜单而不是像Tab带参那样的三级菜单 请问该如何配置路由？

[xachary]

@klgd 看不懂上面描述

[klgd]

@xachary

const Tools: AppRouteModule = {
  path: '/tools',
  name: 'Tools',
  component: LAYOUT,
  meta: {
    orderNo: 11,
    title: '工具',
  },
  children: [
    {
      path: ':id',
      name: 'SubTools',
      component: () => import('@/views/tools/sub/index.vue'),
      meta: {
        title: 'SubTools',
      },
    },
  ],
};

这是tools的路由配置 我想将tools/abc这样的带参url，加到左侧菜单里去，该如何配置呢？ 官方demo中有menu带参的菜单，但那是三级菜单了，我需要的是到二级菜单，而且那个好像也不是直接将带参url放到菜单里了，还要点击一下“切换路由”，:id才有值

[xachary]

这是tools的路由配置 我想将tools/abc这样的带参url，加到左侧菜单里去，该如何配置呢？ 官方demo中有menu带参的菜单，但那是三级菜单了，我需要的是到二级菜单，而且那个好像也不是直接将带参url放到菜单里了，还要点击一下“切换路由”，:id才有值

@klgd 你指的官方 demo 是 /feat/testTab/id 1？ 你的场景是希望少一层？（因为官方是基于代码定义层级生成的）

你可以试试（改官方示例测试）：

src\router\routes\index.ts

// 略...
import { LAYOUT } from '@/router/constant';
// 略...
export const asyncRoutes = [
  PAGE_NOT_FOUND_ROUTE,
  ...routeModuleList,
  // 添加第一层路由测试
  {
    // 一级菜单
    path: '/testTab',
    name: 'TestTabRoot',
    component: LAYOUT,
    meta: {
      orderNo: 0,
      title: '工具',
    },
    children: [
      {
        // 二级菜单
        path: ':id',
        name: 'TestTab', // 对应 defineOptions 的 name，获得 keep-alive 效果
        component: () => import('@/views/demo/feat/tab-params/index.vue'),
        meta: {
          // 页面需要使用 useTabs 的 setTitle 修改 title 为 “TestTab1”、“TestTab2”
          title: 'TestTab',
          hideMenu: true, // 不显示为菜单
        },
      },
      // ignoreRoute: true，意味着下面仅仅是菜单，不是路由
      // 真实路由是 /testTab/:id
      {
        path: '/testTab/id1',
        meta: {
          title: 'TestTab1',
          ignoreRoute: true,
        },
      },
      {
        path: '/testTab/id2',
        meta: {
          title: 'TestTab2',
          ignoreRoute: true,
        },
      },
    ],
  },
];
// 略...

效果：

[klgd]

对对对，就是这样，困扰了我好久，还是对这个项目理解不够，原来还可以不用指定 component，ignoreRoute这个参数之前确实没注意到

@xachary 非常感谢

[anncwb]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days