spa-auto-route

Usage

1. import spa-auto-route;

   import autoRoute from 'spa-auto-route';

2. generate routes;

   const routes = autoRoute(require.context('@/view', true, /index\.vue$/), /\/component\//);

3. put the routes into vue-router.

   new Router({
     mode: 'history',
     base: ROUTER_PREFIX,
     routes: [
       ...routes,
     ],
   });

API

autoRoute(requiredFiles, excludeRegExp)

1. requiredFiles: must be generated by require.context
2. excludeRegExp: files path RegExp which you don't want to put into router
3. if a route has nested routes(multi-level nesting is supported), you should demostrate them in vue instance:

   export default {
     nestedRoutes: [
       // the string is child route folder name(case sensitive).
       'childRoute1',
       'childRoute2',
     ],
     name: 'AFatherRoute',
     data() {
       return {
         ...
       };
     },
   }

4. when use nestedRoutes, you can alse write a 'redirect' property

   export default {
     nestedRoutes: [
       // the string is child route folder name(case sensitive).
       'childRoute1',
       'childRoute2',
     ],
     // you'd better use a component's name rather than a path, because path may be modified occasionally. And name is shorter than path!
     redirect: {
       name: 'AllotBillHome',
     },
     // or
     // redirect: 'path/to/fatherroute/childroute2',
     name: 'AFatherRoute',
     data() {
       return {
         ...
       };
     },
   }

5. You can add a 'alias' property in component

   export default {
     name: 'ARoute',
     alias: 'a/route/anthor/name',
     // multiple aliases
     alias: ['/xxx', 'yyy'],
     data() {
       return {
         ...
       };
     },
   }

6. You can add a 'routeMeta' in component, it's meta property in vue-router

   export default {
     name: 'ARoute',
     alias: 'a/route/anthor/name',
     // multiple aliases
     routeMeta: {
       requiresAuth: true,
     },
     data() {
       return {
         ...
       };
     },
   }

Tips

1. in spa-auto-route file path is router path accurately, so organize your folders reasonably;
2. route'name is token from vue instance's name, please make sure that every vue component has a unique name;
3. routes which nest other child routes should be flat with child routes, like this:

   ├── config.js
   ├── fatherRoute.vue
   ├── childRoute1
   │   └── index.vue
   │   └── config.js
   ├── childRoute2
   │   └── index.vue
   │   └── config.js