自动注册路由
在配置路由的时候认为路由文件太多了,代码不是很好阅读,使用webpack提供的require.context API进行拆分
// 传统的路由写法,一个项目下来有非常多,很不便于阅读
{
path: '...',
name: '...t',
component: () => import('...'),
},
{
path: '...',
name: '...',
component: () => import('...'),
},
创建一个文件:routeModule.js
// An highlighted block
const routerList = [];
function importAll(r){
r.keys().forEach(element => {
routerList.push(r(element).default);
});
}
importAll(require.context('./',true,/\.module\.js/));// 这里自定义为.module.js 结尾的文件
export default routerList
创建对应路由文件:login.module.js
// An highlighted block
export default {
path:'/login',
name:'login',
component:()=>import('../views/login.vue')
}
最后在index.js
引入routeModule.js