前述. 问题找了几个小时,主要之前改过路由的js,开始以为是改动导致，后面发现重新下(前后端代码)也还有问题,最后新建数据库(没问题)，兜兜转转发现是配置的菜单问题
前不久想学习下vue2,然后拉了下开源整好的前后端(开源一条龙)项目
1.vue-element-admin(太久不更新,只有vue2)
2.eladmin-web (个人觉得也很好,ruoyi的借鉴版,只有vue2)
3.RuoYi-Vue (vue3&vue2都有)
选择 RuoYi-Vue 是github上start数多,简单,后台java也有接口,目前两个版本都会体验下,vue3版和vue2版对比差异
| RuoYi-Vue | RuoYi-Vue3 |
|---|---|
| 代码生成预览有高亮插件 | 未集成插件(自己集成) |
| 按钮正常 | 按钮失焦不变回色(element-plus的bug) |
大致讲下ruoyi的路由配置，静态路由部分和动态路由+服务端返的路由 3部分组成了一个用户的完整路由
啥意思:
静态路由: 登录， 首页，重定向， 退出，401 (说白了和用户没关系)
动态路由( ): 比如 分配角色，分配用户，
,修改生成配置
服务端返回 : 自己新增+系统初始化好的一些功能(上面2个都是js代码写死的)
都在router/index.js 定义
1.常量路由
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login'),
hidden: true
},
{
path: '/register',
component: () => import('@/views/register'),
hidden: true
} .....
]
2. 动态路由
// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [
...
{
path: '/system/dict-data',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' }
}
]
}
...
]
禁忌的原因产生: 前端组件名和后台返回组件名冲突，导致静态路由失效
例如:我新增一个目录脚数据管理
-
新增
image.png
这是新增完后
image.png
2.系统设置->字典管理 选择一个数据字典去编辑字典
image.png
结果:
image.png
触发的禁忌原因是啥?(两个组件名冲突触发禁忌)
截图都是 当前所有路由
router.afterEach(() => {
console.info(router.getRoutes());
NProgress.done()
})
1.新增菜单不能设置组件名(后台是将路由地址转驼峰返的)
这是上面的动态路由(字典数据)
image.png
-
这是后台返的
image.png
仔细看,路由里面没有信息
image.png
思考:仔细看了下ruoyi的借鉴版eladmin ，人家静态路由比较少,其余的都是后台加载
export const constantRouterMap = [
{ path: '/login',
meta: { title: '登录', noCache: true },
component: (resolve) => require(['@/views/login'], resolve),
hidden: true
},
{
path: '/404',
component: (resolve) => require(['@/views/features/404'], resolve),
hidden: true
},
{
path: '/401',
component: (resolve) => require(['@/views/features/401'], resolve),
hidden: true
},
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path*',
component: (resolve) => require(['@/views/features/redirect'], resolve)
}
]
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: (resolve) => require(['@/views/home'], resolve),
name: 'Dashboard',
meta: { title: '首页', icon: 'index', affix: true, noCache: true }
}
]
},
{
path: '/user',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'center',
component: (resolve) => require(['@/views/system/user/center'], resolve),
name: '个人中心',
meta: { title: '个人中心' }
}
]
}
]
