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.pswp.cn/news/213954.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/213954.shtml
英文地址,請注明出處:http://en.pswp.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文件頭修復圖片寬高 (…

linux端口轉發

使用iptables 例如要將本地的8080端口轉發到80端口,你可以使用以下命令: sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080這將把進入80端口的流量重定向到8080端口。 使用socat 另一種方法是使用socat工具。首先&am…

?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,但各國的…

Android 刪除瀏覽器導航頁面修改默認主頁

Android 刪除瀏覽器導航頁面修改默認主頁 近來收到客戶需求反饋,需要刪除瀏覽器導航頁面并將百度設置為默認主頁,具體修改參照如下: 刪除瀏覽器導航頁面: /vendor/mediatek/proprietary/packages/apps/Browser/src/com/android…

軟文怎么寫才能讓消費者行動起來?媒介盒子分享

軟文的本質是營銷,做營銷文案不是玩文字藝術,它需要洞察用戶需求,懂產品,了解賣點,懂營銷,懂消費心理,最終讓消費者行動起來。有些文案可能在你看起來遣詞造句和配圖都很一般,但就是…

分布式uuid常用的算法

1、雪花算法介紹 面試官:集群高并發情況下如何實現分布式唯一全局id生成? - 墨天輪 2、百度的UidGenerator 介紹,適合容器化配置,同時兼容springboot,只需要mysql數據庫, https://github.com/baidu/uid-…

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)與另一個網頁的源不同時,就發生了跨域…

day6 arm

main.c #include "uartt.h"//封裝延時函數void delay(int ms){int i,j;for(i0;i<ms;i){for(j0;j<2000;j);}}int main(){//串口初始化uart4_init();//燈初始化led_init();//char a;char *s;while(1){myputchar(\n);myputchar(\r);//從串口讀取一個字符// amyget…

手把手教你反編譯小程序

本次實驗環境 操作系統: win10 10.0.19042 node: v14.17.0 微信開發者工具: Stable 1.05.2110290 前期準備 在電腦端安裝模擬器工具&#xff0c;這里以夜神模擬器為例&#xff0c; 在模擬器中安裝微信&#xff1a;用于微信打開小程序時加載小程序包。在模擬器中文件管理器&…

論文筆記:A review on multi-label learning

一、介紹 傳統的監督學習是單標簽學習&#xff0c;但是現實中一個實例可能對應多個標簽。這篇文章介紹了多標簽分類的定義和評價指標、多標簽學習的算法還有其他相關的任務。 二、問題相關定義 2.1 多標簽學習任務 假設 X R d X R^d XRd&#xff0c;表示d維的輸入空間&am…

面試經典150題(10-13)

leetcode 150道題 計劃花兩個月時候刷完&#xff0c;今天&#xff08;第四天&#xff09;完成了4道(10-13)150&#xff1a; 10. &#xff08;45. 跳躍游戲 II&#xff09;題目描述&#xff1a; 給定一個長度為 n 的 0 索引整數數組 nums。初始位置為 nums[0]。 每個元素 nums[…

日本服務器:確保其穩定性的幾個要點

?  在租用日本服務器時&#xff0c;用戶們大多一定會關注它的穩定性&#xff0c;其實這些顧及都是正常的。畢竟&#xff0c;網站要想正常運行&#xff0c;保障服務器穩定是關鍵。本文將討論有關如何保障日本服務器穩定性的一些有用技巧&#xff0c;希望對您有所幫助。 1.注重…

Linux定時循環備份指定文件或文件夾,每月永久備份留1份

備份需求&#xff1a;每天完成一次指定文件的備份&#xff0c;壓縮后存放到指定目錄 問題&#xff1a;備份時間長了以后占用空間較大&#xff0c;浪費存儲&#xff0c;實際歷史備份意義不大&#xff0c;并不需要永久保存。但是如果直接刪除可能導致無法恢復歷史狀態的數據。 …