Vue自动加载路由

缺乏、安全感 2022-12-02 03:53 189阅读 0赞

每次创建页面之后，都需要手动引入模块，创建路由，很麻烦。  
这里使用webpack中的require.context来实现创建页面之后，自动加载路由。  
同时，因为编写加载路由设定了部分规则，只有遵守该规则才能将路由加载进去，有助于团队命名规范的限制。

## require.context ##

用于自动加载某一目录下，符合我们自定义规则的文件

## 项目结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

## 子路由编写 ##

index.route.js

/** * require.context * 返回一个方法 * 第一个参数为需要查找的目录 * 第二个参数为是否需要遍历子文件夹 * 第三个参数为自定义规则 */
    var r = require.context('./pages',true,/.vue/);
    var arr = [];
    //获取引入的资源['./mode1.index.vue','./mode1.second.vue']
    r.keys().forEach((key)=>{ 
        var _keyArr = key.split(".");
        if(key.indexOf("index")!=-1){ 
            arr.push({ 
                path:_keyArr[1],
                component:r(key).default //key对应的组件
            })
        }else{ 
            arr.push({ 
                path:_keyArr[1]+"/"+_keyArr[2],
                component:r(key).default
    
            })
        }
    })
    export default arr;

## 总路由编写 ##

router/index.js

import Vue from 'vue'
    import Router from '../myrouter'
    
    Vue.use(Router)
    
    var r = require.context("../components",true,/\.route\.js/)
    var arr = [];
    r.keys().forEach((item)=>{ 
      arr = arr.concat(r(item).default);
    })
    export default new Router({ 
      mode: "hash",//模式
      routes: [
        ...arr
      ]
    })

## 结果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/82a220f0418448d3a4d54bc09bb5318b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/921a9411ef974ecdb2d5b09553641bf2.png