Vue常規后台系統，路由懶加載實現基於菜單數據並解耦

路由依賴菜單

場景：文件名與路由組件名完全一致（隨便大小寫均可）

菜單使用一套，路由又存在一套，這樣就很不舒服，於是做了如下處理：

嘗試不用懶加載發現有難度，使用懶加載就很輕松了

data.js

export default [{
  title: '財務',
  subs: [
    {
      title: '提現賬單',
      path: 'withdraw',
    },
  ]
},
{
  title: '項目',
  subs: [{
    title: '雲端工作',
    path: 'cloud_job',
  },
  {
    title: '工貓結算訂單',
    path: 'gongmall',
  }]
},
{
  title: '用戶與認證',
  subs: [{
    title: '雲端開發者認證表',
    path: 'cloud_developer',
  }]
}]

router.js

import Main from './index'

import menus from './components/menu/data'

import Error from './components/404'

const children = []

menus.forEach(menu => menu.subs.forEach(({ path }) => children.push({
  path,
  name: path,
  component: () => import(`./components/${path}`)
})))

children.push({
  path: '*',
  name: '404',
  component: Error
})

children[0].alias = '/'

export default {
  path: '/main',
  name: 'main',
  component: Main,
  children,
}

這是某模塊的獨立路由。