vue2 路由模块化设计

vue2 路由模块化设计

官方demo的写法是直接将路由表放到router文件下的入口文件index.js中，这样看起来代码很冗余，不利于团队开发。
因此采用模块化进行细腻度的设计。

项目环境：vue-cli 5.0.4(需要查看cli版本直接终端输入 vue --version 即可), webpack是vue-cli内置打包工具，node 16.15.0。

路由模块化的文件结构：

下面分别介绍router文件夹下的文件。

路由入口文件 index.js

文件主要执行步骤：

1. 安装路由
2. 创建路由实例
3. 导出路由实例到main.js中进行路由实例挂载(官方文档有)

注意：没有写路由模式是因为默认是hash模式，官方有写。

import Vue from 'vue';
import Router from 'vue-router';

import autoRoutes from './routes';
// 安装路由
Vue.use(Router);
// 创建路由实例，并导出
export default new Router({
    routes: [...autoRoutes]
});

路由表模块文件 modules

比如我这里就一个登录相关模块，首页相关模块。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3p55NgT-1661415038298)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p358)]

建议模块内容都以数组为准最合适。
其中登录模块文件内容：

// 登录模块
export default [
    {
        path: '/login',
        component: () => import(/* webpackChunkName: "login" */ '@/components/pages/LoginPage'),
        meta: { title: '登录' }
    }
];

另外一个首页相关模块同理。

路由模块自动化导出

手动一个一个导出当然可以，但一旦路由模块多了就不方便管理，因此使用自动化导出模块。

核心方法则是webpack中的 require.context() 。

注意：如果是使用的vite打包工具，则是另外一个方法 import.meta.globEager() 。

实现文件则是在routes下的index.js中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCUee30S-1661415038298)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p359)]

实现代码如下：

// 自动归并路由模块
const modulesFiles = require.context('../modules', false, /\.js$/);

const autoRoutes = modulesFiles.keys().reduce((routes, modulePath) => {
    const routeValue = modulesFiles(modulePath).default;
    // 判断路由模块是否为数组，数组使用concat进行拼接，对象使用push推入
    if (Array.isArray(routeValue)) {
        routes = routes.concat(routeValue);
    } else {
        routes.push(routeValue);
    }
    return routes;
}, []);
// 导出路由模块表
export default autoRoutes;

之后就可以在router下的入口文件中引入，配置好的路由表routes, 使用扩展运算符…将routes数组归并进去即可。

注意: 如果有需要注意路由表顺序的情况，建议在路由信息源meta中存入排序号，在自动导入的逻辑里面进行排序引入即可。