若依Vue前端路由配置触发的禁忌

前述. 问题找了几个小时,主要之前改过路由的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' }
      }
    ]
  }
...
]

禁忌的原因产生: 前端组件名和后台返回组件名冲突，导致静态路由失效
例如:我新增一个目录脚数据管理

1. 新增

   
   image.png
   

   这是新增完后

   
   image.png
   2.系统设置->字典管理 选择一个数据字典去编辑字典
   image.png
   

   结果:

   
   image.png

触发的禁忌原因是啥?(两个组件名冲突触发禁忌)
截图都是 当前所有路由

router.afterEach(() => {
    console.info(router.getRoutes());
    NProgress.done()
})

1.新增菜单不能设置组件名(后台是将路由地址转驼峰返的)
这是上面的动态路由(字典数据)

image.png

2. 这是后台返的

   
   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: '个人中心' }
     }
   ]
 }
]