VUE_vue动态路由，引入所有路由，vue路由模块化

蔚落 2022-11-04 00:52 332阅读 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:[
    
        ]
    }

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