Closed markxsq closed 2 weeks ago
所以是怎么加的,一直都无法正常添加菜单,不太清楚路由解析中哪里出了问题
你是有Java后台吗?还是纯前端?纯前端的话现在是mock数据来的哦!要不把你的路由或者菜单相关代码发一下,不然不知道怎么帮助你
我是纯前端,我是想使用这个模板做一个数据测试平台,有后端,但是设计好的接口没有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,不知道什么问题
你这咋都是目录?目录下加菜单,菜单component指向页面路径,说的不好听其实就是照葫芦画瓢的事。
加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
此外,原先定义好的路由数据即使删去children仍然可以正常访问,为什么又可以呢
这么看起来应该是只改了菜单,没有定义路由! 现在可以有两种办法: 1)在你的基础上,router/index 增加相应路由 2)或者把sidebar等一切还原,只改 api/menu里的getRoutes,直接把返回数据写死成你的菜单数据即可(你其实搜一下这个接口的调用情况就了解了)
我还是没看明白路由名称要怎么填写,后台修改菜单还不能把这字段留空😇
麻烦照葫芦画瓢呀,随便英文字母,没有规则限制,记住你在这里的路由名称,然后页面的defineOptions的name和其一致就行。
defineOptions({
name: "User", // 这里填路由名称
inheritAttrs: false,
});
ISSUE 关闭,不要再继续了。比较烦
之前加的菜单,路由名称(route_name)置空才能正常访问,一旦不为空就会有类似提示,然后打不开菜单
index.ts:123 [Vue Router warn]: No match found for location with path "/house/menu"