vue router 拆分路由自动导入

thankseveryday

于 2023-05-31 20:03:14 发布

阅读量217

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/thankseveryday/article/details/130976161

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

该文介绍了如何在Vue.js应用中进行路由拆分，通过示例展示了如何在danweiRouter.js中设置路由。同时，文章详细阐述了自动导入的实现，利用import.meta.globEager遍历模块目录，生成配置路由的代码。最后，展示了如何结合这些配置创建和导出路由器。

摘要由CSDN通过智能技术生成

目录结构：

在这里插入图片描述

拆分路由：

// danweiRouter.js
export default {
    path: '/danwei',
    name: 'danwei',
    component: () => import('../../views/DanweiView.vue')
}

其它相同。

自动导入：

// configRoutes.js
/**
 * @param {String} param1 需要遍历的目录路径
 * @return {Object} 返回一个key为文件相对路径，value为对应文件模块导出的内容的对象集合
 */
const moduleFiles = import.meta.globEager('./modules/*.js');

// 通过 reduce 去搜集所有的模块的导出内容
const configRoutes = Object.keys(moduleFiles).reduce((routes, filepath) => {
    // 因为moduleFiles是一个函数，那么可以接受一个参数（string：文件的相对路径），调用其从而获取到对应路径下的模块的导出对象
    // 导出的对象中有一个属性：default，可以获取到默认导出的所有内容
    const value = moduleFiles[filepath].default;

    // 我们判断导出的是不是数组，是则进行拓展解构
    if (Array.isArray(value)) {
        routes.push(...value);
    } else {
        // 否则直接加到routes中
        routes.push(value);
    }
    return routes;
}, []);

// 直接导出所有模块配置的路由
export default configRoutes;

配置路由：

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import configRoutes from './configRoutes'

const routes = [
    ...configRoutes
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router