vue router 拆分路由 自动导入

news/2024/7/24 10:09:14 标签: vue.js, 前端, javascript

目录

  • 目录结构:
  • 拆分路由:
  • 自动导入:
  • 配置路由:

不求甚解,直接照搬就行了。

目录结构:

在这里插入图片描述

拆分路由:

// 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

✌🏻完美!


http://www.niftyadmin.cn/n/380254.html

相关文章

时间基础概念及Linux中的时间函数

时间基础概念及Linux中的时间函数 时间相关概念GMT 时间UTC 时间时区 Time Zone夏令时 DST本地时间 localtime Linux 系统中的时间时钟基础概念系统节拍数 jiffiesLinux系统查看时间及配置时区获取时间函数获取 当前时间 time()获取 当前时间(微秒) gett…

JavaScript高级教程(javascript实战进阶)

javascript高级、面试常问、必备知识点 1.数据类型2.引用变量赋值问题3. 对象和函数4.函数原型与原型链面试题一面试题二面试题一分析面试题二分析原型链注意点 5.执行上下文和执行上下文栈面试题一面试题二面试题一分析面试题二分析 6.作用域面试题一面试题二面试题一分析面试…

数字信号处理9:Z变换(1)

说实话,这两天看Z变换看的迷迷糊糊的,就觉得它求卷积的时候好用,再剩下的,我怎么感觉用处不大。 首先来说z变换:,或者简单一点的可以这样子写:,感觉Z变换最重要的一个问题是收敛性,…

Yandex:你不可错过的全能搜索引擎

目录 前言一、Yandex网站介绍1-1、网站介绍1-2、优势 二、Yandex网站使用技巧2-1、Yandex搜索引擎2-2、Yandex Maps2-3、Yandex Mail2-4、Yandex Games2-5、Yandex Images2-6、Yandex Video2-7、Yandex.Translate 结语 前言 andex是一家俄罗斯的互联网公司,成立于19…

Python3数据分析与挖掘建模(8)检验

1. 假设检验 1.1 概述 假设检验是一种统计推断方法,用于对一个或多个总体参数提出关于其取值的假设,并根据样本数据对这些假设进行检验。假设检验的目的是根据样本数据提供统计上的证据,以便对总体参数的假设进行接受或拒绝。 在假设检验中…

Android进阶之路 - 字体阴影、文字阴影

最近几个月都挺忙,忙着工作,忙着成长… 一直以来我认为在开发中首当其冲的肯定是需求、功能,然后才是UI细节;所以我自己一般不太会去深究一些看不明显的UI,不过这俩日同事提醒我文字有阴影效果,细看之下果然…

23种设计模式之模板方法模式(Template Method Pattern)

前言:大家好,我是小威,24届毕业生,在一家满意的公司实习。本篇文章将23种设计模式中的模板方法模式,此篇文章为一天学习一个设计模式系列文章,后面会分享其他模式知识。 如果文章有什么需要改进的地方还请大…

ARINC429板卡PCIE-1553B板卡 MIL-STD-1553B总线接口卡 PCIe 1553B通信模块

本系列产品均为自主研发,在有效实现MIL-STD-1553总线功能的同时能为用户的具体应用提供的技术支持。为用户提供了具有友好人机交互界面的总线分析软件,能够满足大多数的通讯、测试及仿真任务要求。本系列产品均为自主研发,在有效实现MIL-STD-…