前述. 問題找了幾個小時,主要之前改過路由的js,開始以為是改動導致，后面發(fā)現(xiàn)重新下(前后端代碼)也還有問題,最后新建數(shù)據(jù)庫(沒問題)，兜兜轉轉發(fā)現(xiàn)是配置的菜單問題

  前不久想學習下vue2,然后拉了下開源整好的前后端(開源一條龍)項目
  1.vue-element-admin(太久不更新,只有vue2)
  2.eladmin-web (個人覺得也很好,ruoyi的借鑒版,只有vue2)
  3.RuoYi-Vue (vue3&vue2都有)

選擇 RuoYi-Vue 是github上start數(shù)多,簡單,后臺java也有接口,目前兩個版本都會體驗下,vue3版和vue2版對比差異

大致講下ruoyi的路由配置，靜態(tài)路由部分和動態(tài)路由+服務端返的路由 3部分組成了一個用戶的完整路由
啥意思:
靜態(tài)路由: 登錄， 首頁，重定向， 退出，401 (說白了和用戶沒關系)
動態(tài)路由( ): 比如 分配角色，分配用戶， ,修改生成配置
服務端返回 : 自己新增+系統(tǒng)初始化好的一些功能(上面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. 動態(tài)路由

// 動態(tài)路由，基于用戶權限動態(tài)去加載
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: '字典數(shù)據(jù)', activeMenu: '/system/dict' }
      }
    ]
  }
...
]

禁忌的原因產(chǎn)生: 前端組件名和后臺返回組件名沖突，導致靜態(tài)路由失效
例如:我新增一個目錄腳數(shù)據(jù)管理

1. 新增

   
   
   image.png
   
   

   這是新增完后

   
   
   image.png
   
   2.系統(tǒng)設置->字典管理 選擇一個數(shù)據(jù)字典去編輯字典
   
   image.png
   
   

   結果:

   
   
   image.png

觸發(fā)的禁忌原因是啥?(兩個組件名沖突觸發(fā)禁忌)
截圖都是 當前所有路由

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

1.新增菜單不能設置組件名(后臺是將路由地址轉駝峰返的)
這是上面的動態(tài)路由(字典數(shù)據(jù))

image.png

2. 這是后臺返的

   
   
   image.png

仔細看,路由里面沒有信息

image.png

思考:仔細看了下ruoyi的借鑒版eladmin ，人家靜態(tài)路由比較少,其余的都是后臺加載

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