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,
}

这是某模块的独立路由。