菜单管理里，新增菜单，路由名称怎么填写？

[markxsq]

之前加的菜单，路由名称（route_name）置空才能正常访问，一旦不为空就会有类似提示，然后打不开菜单

index.ts:123 [Vue Router warn]: No match found for location with path "/house/menu"

[Allennnn2022]

所以是怎么加的，一直都无法正常添加菜单，不太清楚路由解析中哪里出了问题

[diamont1001]

你是有Java后台吗？还是纯前端？纯前端的话现在是mock数据来的哦！要不把你的路由或者菜单相关代码发一下，不然不知道怎么帮助你

[Allennnn2022]

我是纯前端，我是想使用这个模板做一个数据测试平台，有后端，但是设计好的接口没有login这些，所以想把前端的页面全部静态化而不是发请求。在改菜单sidebar的时候源代码如下：

<template>
  <div :class="{ 'has-logo': sidebarLogo }">
    <!--混合布局-->
    <div class="flex w-full" v-if="layout == LayoutEnum.MIX">
      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
      <SidebarMixTopMenu class="flex-1" />
      <NavbarRight />
    </div>
    <!--左侧布局 || 顶部布局 -->
    <template v-else>
      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
      <el-scrollbar>
        <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
      </el-scrollbar>
      <NavbarRight v-if="layout === LayoutEnum.TOP" />
    </template>
  </div>
</template>
`我将其修改为：`
<template>
  <div :class="{ 'has-logo': sidebarLogo }">
    <!-- layout mix-->
    <div class="flex w-full" v-if="layout == LayoutEnum.MIX">
      <!-- 宸︿笂瑙掑浘鏍� -->
      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
      <SidebarMixTopMenu class="flex-1" />
      <NavbarAction />
    </div>
    <!-- layout left || layout top -->
    <template v-else>
      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
      <el-scrollbar>
        <SidebarMenu :menu-list="data" base-path="" />
      </el-scrollbar>
      <NavbarAction v-if="layout === LayoutEnum.TOP" />
    </template>
  </div>
</template>
主要是<SidebarMenu :menu-list="data" base-path="" />改了，data是我从mock数据中复制后改的：
const data = [
  {
    path: "/system",
    component: "Layout",
    redirect: "/system/user",
    name: "/system",
    meta: {
      title: "系统管理",
      icon: "system",
      hidden: false,
      alwaysShow: false,
      params: null,
    },
  },
  {
    path: "/TestManage",
    component: "Layout",
    name: "/TestManage",
    meta: {
      title: "测试管理",
      icon: "el-icon-ElementPlus",
      hidden: false,
      alwaysShow: false,
      params: null,
    },
  },
  {
    path: "/ResultDisplay",
    component: "Layout",
    name: "/ResultDisplay",
    meta: {
      title: "查看结果",
      icon: "el-icon-ElementPlus",
      hidden: false,
      alwaysShow: false,
      params: null,
    },
  },
  {
    path: "/DatasetManage",
    component: "Layout",
    name: "/DatasetManage",
    meta: {
      title: "题库管理",
      icon: "el-icon-ElementPlus",
      hidden: false,
      alwaysShow: false,
      params: null,
    },
  },
];

现在的情况是，系统管理功能可以正常路由跳转，但是其他我自定义的功能不行，我在views目录下也建了相应子目录并建有index.vue，不知道什么问题

[haoxianrui]

你这咋都是目录？目录下加菜单，菜单component指向页面路径，说的不好听其实就是照葫芦画瓢的事。

[Allennnn2022]

加children也试过，把data改为如下：

`{
    path: "/TestManage",
    component: "Layout",
    redirect: "/TestManage/testmanage",
    name: "/TestManage",
    meta: {
      title: "系统管理",
      icon: "el-icon-ElementPlus",
      hidden: false,
      alwaysShow: false,
      params: null,
    },
    children: [
      {
        path: "testmanage",
        component: "TestManage/testmanage",
        name: "TestManage",
        meta: {
          title: "测试管理",
          icon: "el-icon-ElementPlus",
          keepAlive: true,
          hidden: false,
          alwaysShow: false,
          params: null,
        },
      },
    ],
  },`

依旧不会进行路由跳转，页面路径为/src/views/TestManage/testmanage.vue

[Allennnn2022]

此外，原先定义好的路由数据即使删去children仍然可以正常访问，为什么又可以呢

[diamont1001]

这么看起来应该是只改了菜单，没有定义路由！ 现在可以有两种办法： 1）在你的基础上，router/index 增加相应路由 2）或者把sidebar等一切还原，只改 api/menu里的getRoutes，直接把返回数据写死成你的菜单数据即可（你其实搜一下这个接口的调用情况就了解了）

[markxsq]

我还是没看明白路由名称要怎么填写，后台修改菜单还不能把这字段留空😇

[haoxianrui]

麻烦照葫芦画瓢呀，随便英文字母，没有规则限制，记住你在这里的路由名称，然后页面的defineOptions的name和其一致就行。 defineOptions({ name: "User", // 这里填路由名称 inheritAttrs: false, });

[haoxianrui]

ISSUE 关闭，不要再继续了。比较烦