VUE_vue动态路由,引入所有路由,vue路由模块化 蔚落 2022-11-04 00:52 229阅读 0赞 **require.context** 主要使用require.context实现前端工程化动他引入文件 **require.context(directory, useSubdirectories = false, regExp = /^.//)** 第一个参数目标文件夹 是否查找子集 true | false 正则匹配 比如: **require.context(’./router’,true,/.routes.js/** 可以理解为获取router文件下以.routes.js结尾的文件,知道这个以后,就可以在项目动态引入文件,方便使用了 **理由模块化** 同理,也可以解决另一个问题,在vue项目中,路由文件会随着项目增大而越来越大,这个这个我们可以使用require.context进行模块化管理,首页定义好主路由,router.js # 创建页面模块 # 假如这里的index.vue和login.vue是两个模块 ![在这里插入图片描述][2021030109525065.png] # 创建路由模块 # 分别创建index模块和login模块的路由文件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70] index.routes.js children下则是这个模块的路由 export default { path: '/index', name: 'index', component: () => import('../views/index.vue'), //子路由 children:[ ] } login.routes.js export default { path: '/login', name: 'login', component: () => import('../views/login.vue'), //子路由 children:[ ] } # router/index.js # import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routerList = []; function importAll(r){ //r.keys() 拿到所有匹配到的路由文件 r.keys().forEach( //r(key).default拿到default的路由对象 (key) => routerList.push(r(key).default) ); } //这里的目录和规则可以看自己习惯,这里获取的是routes下以.routes.js结尾的文件 //1. 路径 //2. 是否匹配子级文件 //3. 规则 importAll(require.context('./',false,/\.routes.js/)) const routes = [ ...routerList, ] const router = new VueRouter({ routes }) export default router 这样就可以在routes下面按模块管理路由了,不管加入什么,只需要在routes下新建就可以了 [2021030109525065.png]: /images/20221023/d08de98d5fc24e6bb7967712cdde9866.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221023/5416f0a5e38a442c935df617e8027963.png
还没有评论,来说两句吧...