Vue路由的模块自动化与统一加载

红太狼 2021-08-13 12:12 276阅读 0赞

首先呢，我们来看看一般项目路由是怎么划分的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
为什么这么划分呢？如果大项目业务非常多，单纯的单页面很难维护，我们只有这样规范化，才能高效率。

**模块自动化与统一加载的好处：**

*  规范化命名（模块名.业务名.vue）
 *  不用每次写页面都要去总路由引入组件

接下来，我们实战一波。

## 一、建立项目文件目录以及文件夹 ##

根据上面的要求建立，依次在**src文件夹**下的**components文件夹**下建立一个如名叫**model1文件夹**用于存放功能模块（可以分别创建多个模块文件夹，里面分别存放业务代码）。在该文件夹下创建`components文件夹`，用于存放组件。创建`pages文件夹`，用于存放页面。创建`index.route.js`，用于存放模块路由代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]

## 二、编写模块路由 ##

在`index.route.js`文件下编写，

## 三、编写总路由 ##

找到`router文件夹`下的`index.js`文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    let router = require.context("../components",true,/\.route\.js/);
    let arr=[];
    router.keys().forEach((key) => { 
      arr=arr.concat(router(key).default); // 拼接数组
    });
    
    export default new Router({ 
      routes: [
        ...arr // 展开数组
      ]
    })

这样就完毕了，[源代码地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/55101c2431b246478445706dbfdf2336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20210813/9fd42e6d212e4f24a35c2fb2d134d0e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: /images/20210813/9b23f084128448f18dc2925223a9a23b.png
[Link 1]: https://github.com/maomincoding/router_model/