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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kafka-快速实战

Kafka介绍 ChatGPT对于Apache Kafka的介绍: Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发并于2011年开源。它主要用于解决大规模数据的实时流式处理和数据管道问题。 Kafka是一个分布式的发布-订阅消息系统,可以快速地处理高吞吐…

案例课4——智齿客服

1.公司介绍 智齿科技,一体化客户联络中心解决方案提供商。提供基于「客户联络中心」场景的一体化解决方案,包括公域私域、营销服务、软件BPO的三维一体化。 智齿科技不断整合前沿的人工智能及大数据技术,已构建形成呼叫中心、机器人「在线语音…

46. 全排列

全排列 描述 : 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 题目 : LeetCode 46.全排列 : 46. 全排列 分析 : 这里给个非常好的视频 : LeetCode力扣 46. 全排列Permutations_哔哩哔哩_bilibili 解析: class S…

双水平呼吸机算法怎么写?(其实是记录自己写呼吸的心得)

双水平正压呼吸机是什么? 市面上的双水平呼吸机,就是包含有双水平模式的呼吸机,其中一般也会包含单水平模式。其中正压的意思,就是抬高呼吸的压力基线,使吸气顺畅一些。 呼吸机硬件参考 不能给太详细,就给…

机械中常用的一些术语

目录 一、OEMSOP:SOP编写指南 WI(标准作业指导书):标准作业程序 (SOP):SOP和WI的区别:一、PFC、FMEA、PCP、WIPPAP、PSW: 一、OEM 1.OEM: 原始设备制造商OEM(Original Equipment Manufacturer)…

从零开始的C++(二十一)

C11 1.列表初始化: //允许以下代码正确运行int a[]{1,2,3};//效果与int a[]{1,2,3}一致 即允许省略等于号。同时,允许用花括号对所有自定义类型和内置类型进行初始化,而非以前花括号只能对数组进行初始化。利用花括号对自定义类型初始化时…

数据结构和算法-单链表

数据结构和算法-单链表 1. 链表介绍 链表是有序的列表,但是它在内存中是存储如下 图1 单链表示意图 小结: 链表是以节点的方式存储每个节点包含data域,next域,指向下一个节点。如图:发现链表的各个节点不一定是连续存储。比如地…

C语言函数详解

# 函数的概念 对于函数,我想大家应该并不陌生,在数学中就存在函数的概念,比如:一次函数 ykxb ,k和b都是常数,给⼀个任意的x,就能得到⼀个y值。 在C语言中也有函数的概念,函数也被称为…

unity 模型生成PNG图片并导出(可以任意控制方向和大小,本文提供三种方案)

提示:文章有错误的地方,还望诸位大神不吝指教! 文章目录 前言一、插件RuntimePreviewGenerator(方案一)二、unity 官方提供的接口(方案二)三、方法三,可以处理单个模型,也…

STM32基于USB串口通信应用开发

✅作者简介:热爱科研的嵌入式开发者,修心和技术同步精进, 代码获取、问题探讨及文章转载可私信。 ☁ 愿你的生命中有够多的云翳,来造就一个美丽的黄昏。 🍎获取更多嵌入式资料可点击链接进群领取,谢谢支持!…

git自动更新功能

确认权限 因为一般Linux系统网页用的www 或 www-data用户和用户组,所以要实现自动来去,首先要在www用户权限下生成ssh密钥,不然没有权限,其次就是,要把用root用户拉去的代码,批量改成www用户 1. 给www权限 vi /etc/sudoers www ALL=(ALL) NOPASSWD:/bin/chow…

整体式雨水收集pp模块可根据需求承重可达30到60吨每平方米

整体式雨水收集pp模块的承重能力主要取决于其设计和制造工艺,以及所使用的材料。一般来说,模块的尺寸越大,承重能力也越大。同时,模块的设计和制造工艺也会影响其承重能力。 在设计和制造整体式雨水收集pp模块时,需要…

unity 2d 入门 飞翔小鸟 小鸟碰撞 及死亡(九)

1、给地面,柱体这种添加2d盒装碰撞器,小鸟移动碰到就不会动了 2、修改小鸟的脚本(脚本命名不规范,不要在意) using System.Collections; using System.Collections.Generic; using UnityEngine;public class Fly : Mo…

CompletableFuture异步多任务最佳实践

简介 CompletableFuture相比于Java8的并行流,对于处理并发的IO密集型任务有着得天独厚的优势: 在流式编程下,支持构建任务流时即可执行任务。CompletableFuture任务支持提交到自定义线程池,调优方便。 本文所有案例都会基于这样…

向日葵远程控制鼠标异常的问题

​ 在通过向日葵进行远程控制的时候,可能会遇到鼠标位置异常的问题。此时,不管怎么移动鼠标,都会停留在屏幕最上方,而无法点击到正确的位置。如图: 此时,如果启用了“被控端鼠标”功能,可以正…

ChatGLM3-6B和langchain阿里云部署

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、ChatGLM3-6B部署搭建环境部署GLM3 二、Chatglm2-6blangchain部署三、Tips四、总结 前言 提示:这里可以添加本文要记录的大概内容: …

回顾2023 亚马逊云科技 re_Invent,创新AI,一路同行

作为全球云计算龙头企业的亚马逊云科技于2023年11月27日至12月1日在美国拉斯维加斯举办了2023 亚马逊云科技 re:Invent,从2012年开始举办的亚马逊云科技 re:Invent 全球大会,到现如今2023 亚马逊云科技 re:Invent,回顾历届re:Invent大会,亚马…

imutils库介绍及安装学习

目录 本机环境 安装 函数及属性 列举imutils库信息 属性和函数介绍及使用 属性 常用函数 方法使用 图像平移 图像缩放 图像旋转 骨架提取 通道转换 OPenCV版本的检测 综合测试 介绍 imutils 是一个用于图像处理和计算机视觉任务的 Python 工具包。它提供了一系…

Python爬虫-实现批量抓取王者荣耀皮肤图片并保存到本地

前言 本文是该专栏的第12篇,后面会持续分享python爬虫案例干货,记得关注。 本文以王者荣耀的英雄皮肤为例,用python实现批量抓取“全部英雄”的皮肤图片,并将图片“批量保存”到本地。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。注意,这里抓取的图片…

centos7中的计划任务

一次调度执行-----at 安装&#xff1a; [rootzaotounan ~]# yum -y install at ​ 启动&#xff1a; [rootzaotounan ~]# systemctl start atd ​ 开机自启动&#xff1a; [rootzaotounan ~]# systemctl enbale atd ​ 语法&#xff1a; at <时间规格> 时间规格参数&…