VUE去中心化的路由实现

• 2019 年 12 月 19 日
• 笔记

在做VUE时，很多时候把路由写在同一个路由文件里，这样在项目越来越大时，该文件需要多次修改，这样很不方便。 现在需要把各个路由分配至各个模块中，然后进行汇总 1.编写各个模块的路由

 export default [          {          path: '/sys/auth/menu',          component: resolve => require(['./sys_menu.vue'], resolve),          meta: {title: '菜单管理'}      },      {          path: '/sys/auth/resource',          component: resolve => require(['./sys_auth_resource.vue'], resolve),          meta: {title: '资源管理'}      },      {          path: '/sys/auth/role',          component: resolve => require(['./sys_auth_role.vue'], resolve),          meta: {title: '角色管理'}      },    ]

2.遍历各个路由，汇总路由

 import Vue from 'vue';  import Router from 'vue-router';    Vue.use(Router);  let routers = []  const routerContext = require.context('./views', true, /router.js/)  routerContext.keys().forEach(route => {      // 如果是根目录的 index.js、 不做任何处理      if (route.startsWith('./index')) {          return      }      const routerModule = routerContext(route)      // 兼容 import export 和 require module.export 两种规范 Es modules commonjs      routers = [...routers, ...(routerModule.default || routerModule)]  })  export default new Router({      routes: [          {              path: '/',              redirect: '/dashboard'          },          {              path: '/',              component: resolve => require(['./components/common/Home.vue'], resolve),              meta: {title: '主页'},              children: routers          },          {              path: '/login',              component: resolve => require(['./views/Login.vue'], resolve)          },          {              path: '/oauth/:source',              component: resolve => require(['./views/oauth/oauth.vue'], resolve)          },          {              path: '*',              redirect: '/404'          },        ]  })

至此，VUE去中心化路由功能已完成！