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

news2024/11/26 9:40:31

实现效果,配置了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.coloradmin.cn/o/1301101.html

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

相关文章

关于python一些惯用写法、语法

关于python一些惯用代码处理 程序入口(python从脚本第一行开始运行,没有统一的入口)if __name__ __main__: filename.split("/")[-1][:-4][split("/")\[-1\] 和 split("/",-1)的区别](https://blog.csdn.net/jialibang/a…

分层网络模型(OSI、TCP/IP)及对应的网络协议

OSI七层网络模型 OSI(Open System Interconnect),即开放式系统互连参考模型, 一般都叫OSI参考模型,是ISO组织于1985年研究的网络互连模型。OSI是分层的体系结构,每一层是一个模块,用于完成某种功…

TailwindCSS 如何处理RTL布局模式

背景 TikTok作为目前全世界最受欢迎的APP,需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的,在前端有一个专有名字RTL模式,即Right-to-Left。 其中以阿拉伯语作为第一语言的人…

Oracle(2-14)User-Managed Incomplete Recovery

文章目录 一、基础知识1、Incomplete Recovery Overview 不完全恢复概述2、Situations Requiring IR 需要不完全恢复的情况3、Types of IR 不完全恢复的类型4、IR Guidelines 不完全恢复指南5、User-Managed Procedures 用户管理程序6、RECOVER Command Overview 恢复命令概述7…

深度学习:自注意力机制(Self-Attention)

1 自注意力概述 1.1 定义 自注意力机制(Self-Attention),有时也称为内部注意力机制,是一种在深度学习模型中应用的机制,尤其在处理序列数据时显得非常有效。它允许输入序列的每个元素都与序列中的其他元素进行比较&a…

应用开发平台文件处理设计与实现系列之1——文件处理需求、方案、整体设计

需求 对于应用系统而言,数据主要分为两大类,结构化数据和非结构化数据。 结构化数据通常是指可以明确定义其数据结构及属性的对象,如组织机构、用户、合同、订单等,通常都会使用关系型数据库来存储,通过SQL来读写。 非…

区间合并|LeetCode100136:统计好分割方案的数目

作者推荐 【动态规划】【广度优先】LeetCode2258:逃离火灾 本文涉及的基础知识点 区间合并 题目 给你一个下标从 0 开始、由 正整数 组成的数组 nums。 将数组分割成一个或多个 连续 子数组,如果不存在包含了相同数字的两个子数组,则认为是一种 好分…

layui分页laypage结合Flask+Jinja2实现流程

Layui2.0普通用法<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 …

使用eXtplorer本地搭建文件管理器并内网穿透远程访问本地数据

文章目录 1. 前言2. eXtplorer网站搭建2.1 eXtplorer下载和安装2.2 eXtplorer网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1. 前言 通过互联网传输文件&#xff0c;是互联网最重要的应用之一&#xff0c;无论是…

ThingWorx 9.2 Windows安装

参考官方文档安装配置 1 PostgreSQL 13.X 2 Java, Apache Tomcat, and ThingWorx PTC Help Center 参考这里安装 数据库 C:\ThingworxPostgresqlStorage 设置为任何人可以full control 数据库初始化 pgadmin4 创建用户twadmin并记录口令password Admin Userpostgres Thin…

I.MX6ULL_Linux_驱动篇(46)linux LCD驱动

LCD 是很常用的一个外设&#xff0c;在Linux 下LCD 的使用更加广泛&#xff0c;在搭配 QT 这样的 GUI 库下可以制作出非常精美的 UI 界面。本章我们就来学习一下如何在 Linux 下驱动 LCD 屏幕。 Linux 下 LCD 驱动简析 Framebuffer 设备 先来回顾一下裸机的时候 LCD 驱动是怎…

Leetcode每日一题

https://leetcode.cn/problems/binary-tree-preorder-traversal/ 这道题目需要我们自行进行创建一个数组&#xff0c;题目也给出我们需要自己malloc一个数组来存放&#xff0c;这样能达到我们遍历的效果&#xff0c;我们来看看他的接口函数给的是什么。 可以看到的是这个接口函…

探秘ipa文件签名工具在线签名工具:工作原理和代码表示原理

随着iOS应用程序的兴起&#xff0c;ipa文件的安全性变得越来越重要。为了确保应用程序来源的可信度和完整性&#xff0c;开发者需要对其应用进行签名&#xff0c;并使用正确的证书来验证其身份。在这篇文章中&#xff0c;我们将探索一个名为在线签名工具的ipa文件签名工具&…

指令数据:训练大模型的“隐形助力”

作者&#xff1a;谭婧 &#xff08;一&#xff09;指令数据&#xff0c;了解一下 先聊一件圈内趣事&#xff1a; 2023年初&#xff0c;大约在1月到2月份前后&#xff0c; 百度公司如流工作卡上有一个任务&#xff0c; 让百度员工打开脑洞&#xff0c;写“问答对”。 一问一答都…

智能优化算法应用:基于教与学算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于教与学算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于教与学算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.教与学算法4.实验参数设定5.算法结果6.参考文…

gin投票系统3

对应视频v1版本 1.优化登陆接口 将同步改为异步 原login前端代码&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>香香编程-投票项目</title> </head> <body> <m…

分支和回溯

题目&#xff1a;四皇后问题 解空间&#xff1a;四维向量x1,x2,x3,x4 四叉树&#xff1a;定义 每一个节点向下分叉 有四个 就是四叉树 第一个皇后第二个皇后第三个皇后第四个皇后1111222233334444 第一个皇后第二个皇后第三个皇后第四个皇后可行&#xff1f;1324x 2 3 反斜线…

初识Ceph --组件、存储类型、存储原理

目录 ceph组件存储类型块存储文件存储对象存储 存储过程 ceph Ceph&#xff08;分布式存储系统&#xff09;是一个开源的分布式存储系统&#xff0c;设计用于提供高性能、高可靠性和可扩展性的存储服务&#xff0c;可以避免单点故障&#xff0c;支持块存储、对象存储以及文件系…

在IDEA中创建Maven项目时没有src文件、不自动配置文件

错误示例&#xff1a; 没有src文件&#xff0c;并且没有自动下载相关的配置文件 对我这中情况无效的解决办法&#xff1a; ①配置好下列图中圈出来的文件 ②在VM选项中输入&#xff1a;“-DarchetypeInternal” ③点击应用&#xff0c;再点击确定 ④还是不行 解决办法&#x…

为 Compose MultiPlatform 添加 C/C++ 支持(2):在 jvm 平台使用 jni 实现桌面端与 C/C++ 互操作

前言 在上篇文章中我们已经介绍了实现 Compose MultiPlatform 对 C/C 互操作的基本思路。 并且先介绍了在 kotlin native 平台使用 cinterop 实现与 C/C 的互操作。 今天这篇文章将补充在 jvm 平台使用 jni。 在 Compose MultiPlatform 中&#xff0c;使用 jvm 平台的是 An…