vue router 拆分路由 自动导入

news2024/9/22 11:32:35

目录

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

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

目录结构:

在这里插入图片描述

拆分路由:

// 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.coloradmin.cn/o/594123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

详解RGB和YUV色彩空间转换

前言 首先指出本文中的RGB指的是非线性RGB,意思就是经过了伽马校正,按照行业规矩应当写成RGB,但是为了书写方便,仍写成RGB。关于YUV有多种叫法,分别是YUV,YPbPr,YCbCr。因此本文将首先指出他们之…

这 13 种职业用AI提效的 40 类场景盘点

随着人工智能技术的发展,职业领域出现了诸如我们“小蜜蜂助手Beezy”等神奇的工具,大幅度提升了各行各业里从业人员的工作效率。 笔者今天将详述13种常见职业,分别是如何利用这些工具在实际工作过程中来帮助自己提升效率的。大量干货和私藏宝…

2419286-92-1,Sulfo-Cy5.5 NHS ester,磺酸基Cyanine5.5-活性酯,用于标记抗体

Sulfo-Cyanine5.5 NHS ester,sulfo Cy5.5(Et) NHS,sulfo Cy5.5 SE,磺酸基Cy5.5-活性酯 (文章资料汇总来源于:陕西新研博美生物科技有限公司小编MISSwu)​ 产品结构式: 产品规格: 1…

Maven高级2-聚合与继承

1. 聚合 注意打包方式&#xff0c;不是默认的jar包形式&#xff0c;也不是web的war包形式&#xff0c;而是pom形式&#xff1b; <groupId>org.example</groupId> <artifactId>springmvc_08_parent</artifactId> <version>1.0-SNAPSHOT</versi…

探索 Web 管理之路,OpenYurt 社区 UI/CLI SIG 正式启动

作者&#xff1a;陈璐、邓梁 背景 OpenYurt 是业界首个依托云原生技术体系、“零”侵入实现的智能边缘计算平台。它具有“云、边、端一体化”的全方位能力,可以帮助用户快速实现大规模边缘计算业务和异构算力的高效交付、运维及管理。 在前几个迭代的大版本中&#xff0c;Op…

探访世优科技数字人虚拟直播产品体系 | 世优开放日再次成功举行

2023年5月30日&#xff0c;世优科技全栈技术产品体验活动&#xff08;第二期&#xff09;顺利落下帷幕。此次活动共邀请到30余位各行各业的嘉宾到场&#xff0c;在两个多小时的开放日活动中&#xff0c;世优科技全面展示数字人及虚拟直播领域的技术产品体系。来访嘉宾们全程体验…

大数据:HDFS的Shell操作,进程启动管理,文件系统操作命令,创建文件文件夹,下载上传,复制移动,删除,展示,追加内容

大数据&#xff1a;HDFS的Shell操作&#xff0c;进程启动管理&#xff0c;文件系统操作命令&#xff0c;创建文件文件夹&#xff0c;下载上传&#xff0c;复制移动&#xff0c;删除&#xff0c;展示 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c…

vue-admin-templae源码分析

1.源码结构: build下index.js为工程发布dist工具 mock为接口数据模拟服务器 node_modules为npm install 安装的nodejs依赖模块 public为静态资源 src不工程源码目录 tests为单元测试目录 开发与生产环境文件 vue.config.js为工程配置文件 登陆页面,登陆按钮点击事件调用完整流…

【P45】JMeter 开关控制器(Switch Controller)

文章目录 一、开关控制器&#xff08;Switch Controller&#xff09;参数说明二、测试计划设计2.1、下标值2.2、变量 一、开关控制器&#xff08;Switch Controller&#xff09;参数说明 Switch 控制器的作用类似于 Interleave 控制器&#xff0c;因为它在每次迭代时运行其中一…

php内置类小结

文章目录 php内置类小结Error、Exception进行xss、绕过hash比较Error类Exception类使用Error、Exception内置类绕过md5、sha1等哈希比较Error类详解Exception类详解例题&#xff1a;[2020 极客大挑战]Greatphp 使用DirectaryIterator、Filesystemlterator、Globlterator内置类读…

ADManager Plus:简化员工管理,助力组织高效运营

在现代组织中&#xff0c;高效的员工管理是成功的关键之一。然而&#xff0c;随着员工数量的增加和组织结构的复杂化&#xff0c;手动处理员工管理任务变得繁琐而耗时。在这种情况下&#xff0c;ADManager Plus作为一款出色的员工管理解决方案&#xff0c;通过其卓越的功能和自…

那些在学习GPT的过程中学到的

1、大模型是什么 GPT横空出世之后&#xff0c;大模型火了&#xff0c;什么是大模型呐&#xff1f; 大模型通常指的是具有大规模参数和复杂结构的深度学习模型。它们的设计和结构可以因任务而异&#xff0c;但以下是一些常见的大模型结构&#xff1a; Transformer&#xff1a…

交换求和顺序的条件

交换求和顺序 文章目录 交换求和顺序应用场景可以交换求和的条件&#xff08;部分内容来源ChatGPT&#xff09;不能交换的情况其他可以参考的资料 应用场景 在多重求和中&#xff0c;交换求和顺序的最常见情况是需要改变计算某个表达式&#xff08;通常是连乘或连加&#xff0…

【软件】无联网情况下安装Win11 / 华为电脑更换Win11系统后触摸屏、声卡失效物理解决方案

一、提前备份好电脑驱动&#xff08;华为电脑更换Win11系统后触摸屏、声卡失效物理解决方案&#xff09; 1.电脑驱动备份方法&#xff1a; 1&#xff09;通过管理员身份打开命令提示符。 2&#xff09;输入命令&#xff1a;dism /online /export-driver /destination:"D…

极氪汽车 APP 系统云原生架构转型实践

作者&#xff1a;极氪汽车 前言 新能源汽车已经成为我国汽车市场再次崛起的关键支柱&#xff0c;随着新能源汽车市场的快速发展&#xff0c;不同类型的品牌造车厂商呈现出百花齐放的态势。极氪汽车是吉利控股集团旗下高端纯电汽车新品牌&#xff0c;2021 年 4 月极氪发布首款…

踩坑笔记 ---- 使用LocalDateTime开通会员到期时间与自动续费业务某天用户突然为0

写在前面 使用LocalDateTime的同学需要注意下&#xff0c;这东西的plusMonth可能会有点点超出你的认知&#xff0c;如果不慎掉坑里&#xff0c;希望这篇笔记可以给你提供思路 业务背景 此业务场景非常简单&#xff0c;自动续费业务&#xff0c;需要在用户会员到期前24小时执…

Linux 防火墙开启端口

文章目录 查看防火墙状态开启指定端口重启防火墙重新加载防火墙查看已开启的端口关闭指定端口临时关闭防火墙永久关闭防火墙&#xff08;必须先临时关闭防火墙&#xff0c;再执行该命令&#xff0c;进行永久关闭&#xff09;结语 以下是一些常用的 firewalld 命令&#xff1a; …

C++11中条件标量和互斥锁应用出现死锁思考

条件变量和互斥锁在多线程同步过程中经常被使用&#xff0c;以下测试程序测试其使用。 目录 1.测试程序1 2.测试程序2 3.运行结果思考 1.测试程序1 #include <mutex> #include <deque> #include <iostream> #include <thread> #include <condi…

5-网络初识——封装和分用

目录 1.数据封装的过程 2.数据分用的过程 PS&#xff1a;网络数据传输的基本流程&#xff08;以QQ为例&#xff0c;A给B发送一个hello&#xff09;&#xff1a; 一、发送方&#xff1a; 二、接收方&#xff1a; 不同的协议层对数据包有不同的称谓&#xff0c;在传输层叫做…

Linux:忘记root密码解决办法

如果你是虚拟机只要将光盘镜像连接到虚拟机上&#xff0c;以光盘iso镜像启动 如果你是真机或服务器那将实体u盘或实体光盘连接至设备并且以连接的设备启动 开机时候打断开机 使用 &#xff08;u盘|光盘&#xff09;引导启动 troubleshooting rescue a centos system 输入 1…