vite脚手架,配置动态生成路由,添加不同的layout以及meta配置

实现效果,配置了layout和对应的路由的meta

请添加图片描述

  • 我想每个模块添加对应的layout,下边演示一层layout及对应的路由

约束规则:
每个模块下,添加对应的 layout.vue 文件
每个文件夹下的 index.vue 是要渲染的页面路由
每个渲染的页面路由对应的 page.json 是要配置的路由的meta

以下demo目录结构,页面放到了pages下,如果你是在其它文件夹名字,请自己修改
请添加图片描述
以上路径会生成如下结构

[{"path": "/admin","meta": {"title": "管理系统","isAuth": true},"children": [{"path": "/admin/about","meta": {"title": "关于我们","isAuth": true}},{"path": "/admin/home","meta": {}}],"redirect": "/admin/home"},{"path": "/crm","meta": {},"children": [{"path": "/crm/dust","meta": {}}],"redirect": "/crm/dust"}
]

直接上代码了,多级有需要的自己递归下

  • router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';// page module
const pagesModule = import.meta.glob('@/pages/**/index.vue');// layout module
const layoutModule = import.meta.glob('@/pages/**/layout.vue');// 获取路由页面的配置
const pagesConfig = import.meta.glob('@/pages/**/page.json', {eager: true,import: 'default'
});// 处理路径
function getPath(path: string, tag: string) {return path.replace('/src/pages', '').replace(`/${tag}.vue`, '');
}// 获取页面配置meta
function getMeta(path: string, tag: string): any {return pagesConfig[path.replace(`${tag}.vue`, 'page.json')] || {};
}// 生成layout下路由
function genChildrenRouter(layoutKey: string, obj: any) {const LAYOUT_KEY = layoutKey.replace('/layout.vue', '');for (const pageKey in pagesModule) {if (pageKey.includes(LAYOUT_KEY)) {obj.redirect = getPath(pageKey, 'index');obj.children.push({path: getPath(pageKey, 'index'),component: pagesModule[pageKey],meta: getMeta(pageKey, 'index')});}}
}// 生成layout
function genLayout() {const layoutList = [];for (const layoutKey in layoutModule) {const obj: RouteRecordRaw = {path: getPath(layoutKey, 'layout'),component: layoutModule[layoutKey],meta: getMeta(layoutKey, 'layout'),children: []};genChildrenRouter(layoutKey, obj);layoutList.push(obj);}return layoutList;
}// 最终的结果
const routerList = genLayout();const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',redirect: routerList[1].path},...routerList]
});export default router;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213954.shtml

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

相关文章

Appium python自动化测试系列之移动自动化测试!

1.1 移动自动化测试现状 因为软件行业越来越发达,用户的接受度也在不断提高,所以对软件质量的要求也随之提高,当然这个也要分行业,但这个还是包含了大部分。因为成本、质量的变化现在对自动化测试的重视度越来越高,在…

CTF-misc(1)图片隐写

笔记目录 渗透测试工具(1)wireshark渗透测试工具(2)Nmap渗透测试工具(3)BurpsuiteAWD比赛(1)AWD入门攻略大纲CTF-Web(2)SQL注入CTF-Web(3)文件上传漏洞 图片隐写目录 (1)GIf和二维码隐写 二维码补全 二维码绘图 Gif规律分析 (2)文本附加图片隐写 (3)IHDR文件头修复图片宽高 (…

⭐Unity 搭建UDP服务端(02)接收客户端消息

客户端在上一篇 由于服务器逻辑写的较为简单 所以直接上代码了~ using System; using System.Net; using System.Net.Sockets; using System.Text; using UnityEngine;public class UdpServer : MonoBehaviour {public static UdpServer instance;private void Awake(){if (…

Springboot管理系统数据权限过滤——ruoyi实现方案

本文主要简述,Ruoyi框架使用的权限过滤实现方案,实现简单易懂。主要知识点有: 注解定义;面向切面编程,在执行有数据权限注解的方法之前获取用户组织权限,拼接到domain对象的params参数中; 1. …

AI:100-基于卷积神经网络的农作物生长状态监测

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的核心代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新…

基于CMT2300A定制的模组谐波测量及调试事例

1.1 芯片介绍 CMT2300A华普微推出的一款超低功耗 Sub-1GHz 射频收发器,是一款SPI接口射频前端芯片,调制方式支持OOK (G)FSK 、(G)MSK,速率最大可以做到300 kbps,休眠大概1uA,功率最大可以做到20dB,但各国的…

软文怎么写才能让消费者行动起来?媒介盒子分享

软文的本质是营销,做营销文案不是玩文字艺术,它需要洞察用户需求,懂产品,了解卖点,懂营销,懂消费心理,最终让消费者行动起来。有些文案可能在你看起来遣词造句和配图都很一般,但就是…

Python办公之Excel篇

1.准备环境 Python版本:3.6.5 IDE集成开发环境:pycharm Python库选择:openpyxl openpyxl操作的excel文件以xlsx结尾。 基础命令 查看 Python 版本 python --version查看 pip 版本 pip --version安装openxlsx pip install openpyxl -i…

9.静态路由

静态路由 中小型网络都会用到,防火墙核心交换机用的很多,一般是用在出口 路由表:路由器用来转发数据包唯一的依据 NextHop下一跳 Static静态路由需要手动设置 ip route-static 目标网段 掩码 下一跳例如:ip route-static 192…

QT讲程序打包成安装包让任何人可以使用

💂 个人主页:pp不会算法v 🤟 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 文章目录 1、release模式下编译2、windeploy 打包发布3、使用inno setu…

node.js express cors解决跨域

目录 什么是跨域 示例 postman请求 前端请求 cors中间件解决跨域 流程 配置cors参数 什么是跨域 跨域(Cross-Origin)是指在 Web 开发中,当一个网页的源(Origin)与另一个网页的源不同时,就发生了跨域…

手把手教你反编译小程序

本次实验环境 操作系统: win10 10.0.19042 node: v14.17.0 微信开发者工具: Stable 1.05.2110290 前期准备 在电脑端安装模拟器工具,这里以夜神模拟器为例, 在模拟器中安装微信:用于微信打开小程序时加载小程序包。在模拟器中文件管理器&…

论文笔记:A review on multi-label learning

一、介绍 传统的监督学习是单标签学习,但是现实中一个实例可能对应多个标签。这篇文章介绍了多标签分类的定义和评价指标、多标签学习的算法还有其他相关的任务。 二、问题相关定义 2.1 多标签学习任务 假设 X R d X R^d XRd,表示d维的输入空间&am…

日本服务器:确保其稳定性的几个要点

​  在租用日本服务器时,用户们大多一定会关注它的稳定性,其实这些顾及都是正常的。毕竟,网站要想正常运行,保障服务器稳定是关键。本文将讨论有关如何保障日本服务器稳定性的一些有用技巧,希望对您有所帮助。 1.注重…

SpringBoot 启动加载器解析

计时器介绍 启动加载器实战 实现方式1 实现CommandLineRunner接口重写run方法通过Order进行排序 示例: Component Order(1) public class FirstCommandlineRunner implements CommandLineRunner {Overridepublic void run(String... args) throws Exception {System.out.pr…

一篇上手机器学习

一、上手机器学习的几个阶段 上手机器学习,第一步当然是看完我的这篇文章啦~,然后就按以下步骤来就可以了: 学习Python编程语言:Python是一种易于学习的高级编程语言,广泛应用于机器学习领域。你可以通过学习Python的…

第三节、项目支付功能实战-微信支付平台接入流程,小程序账号注册、商户注册

简介 本篇介绍小程序的注册流程、商户平台的注册流程、以及小程序和商户平台如何进行绑定。 微信小程序注册 由于项目中使用了小程序进行支付,所以首先来注册小程序。小程序注册网站如下:小程序注册地址 小程序账号注册 1、链接页面点击“前往注册”…

carla安装中的问题

1、carla carla安装完后,需要使用python调用API去更换地图,增加车辆等 使用Python调用API过程中可能会报错: 报错1:carla API(Carla包)版本不对 **解决方法:**需要将这个目录下的三个文件拷…

数学建模算法

算法部分 1. 评价类模型2. TOPSIS3. 线性规划4. 聚类分析5. 预测模型6. 拉伊达准则(对异常值进行剔除)7. 数据拟合8. 图论代码练习1. 模拟圆周率2. 斐波那契数列3. 四只鸭子落在一个圆中概率4. 方程2: y" uy y,初值y(0) 1,y(0) 0 算法讲解 matlab代码大全 1. 评价类模型…

【Python】修改pip 默认安装位置

使用pip安装的时候,一般是默认安装在c盘里的。这样做很容易会让c盘的文件堆满。那么如何让pip安装的包放入d盘呢? 查看pip默认安装的位置 在cmd里输入python -m site,这里可以看到,安装包会默认下载到c盘中 从这里可以看到&am…