- import spa-auto-route;
import autoRoute from 'spa-auto-route';
- generate routes;
const routes = autoRoute(require.context('@/view', true, /index\.vue$/), /\/component\//);
- put the routes into vue-router.
new Router({ mode: 'history', base: ROUTER_PREFIX, routes: [ ...routes, ], });
autoRoute(requiredFiles, excludeRegExp)
- requiredFiles: must be generated by require.context
- excludeRegExp: files path RegExp which you don't want to put into router
- 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 { ... }; }, }
- 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 { ... }; }, }
- You can add a 'alias' property in component
export default { name: 'ARoute', alias: 'a/route/anthor/name', // multiple aliases alias: ['/xxx', 'yyy'], data() { return { ... }; }, }
- 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 { ... }; }, }
- in spa-auto-route file path is router path accurately, so organize your folders reasonably;
- route'name is token from vue instance's name, please make sure that every vue component has a unique name;
- 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