vue3更具文件目录动态添加路由配置

server/2024/10/18 2:19:03/

在项目中,想要在某个文件夹下直接添加.vue文件,并根据文件自动生成route跳转,

在view文件夹下,建立threePage文件夹,在里面建立index.vue,index1.vue;

建立three.js文件,

动态获取view/threePage里面文件,配置文件router对象。


const modulesFiles =  import.meta.glob('../views/threePage/*.vue');
let routerArr = [];
Object.keys(modulesFiles).forEach(item => {if(/\.vue/.test(item)){let pageArr = item.split('/');let str = pageArr[pageArr.length-1];let pageName = str.split('.')[0];routerArr.push({path: '/three/' + pageName,name: 'three/'+ pageName,component: () => import(item),meta: {keepAlive: true,title: 'threeIndex'}});}
});
console.log(routerArr, 'routerArr');
export default routerArr

在router的index文件内引入上述文件,打开对应的页面路径 

 /three/index?a=1;   

 /three/index1?a=1;

即可跳转对应的页面;   


http://www.ppmy.cn/server/125255.html

相关文章

[报错解决] 运行MATCHA时需要在线下载Arial.TTF字体,但是无法连接huggingface

一、报错详情 requests.exceptions.ConnectTimeout:(MaxRetryError("HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /ybelkada/fonts/resolve/main/Arial.TTF (Caused by ConnectTimeoutError(<urllib3.connection.HTTPSConnec…

Elasticsearch要点简记

Elasticsearch要点简记 1、ES概述2、基础概念&#xff08;1&#xff09;索引、文档、字段&#xff08;2&#xff09;映射&#xff08;3&#xff09;DSL 3、架构原理4、索引字段的数据类型5、ES的三种分页方式&#xff08;1&#xff09;深度分页&#xff08;fromsize&#xff09…

使用myAGV、Jetson Nano主板和3D摄像头,实现了RTAB-Map的三维建图功能!

引言 在现代机器人技术中&#xff0c;高精度的环境感知与建图是实现自主导航的关键。本文将展示如何使用myAGV Jetson Nano移动平台搭载Jetson Nano BO1主板&#xff0c;结合RTAB-Map和3D相机&#xff0c;实现更加立体和细致的环境建图。myAGV Jetson Nano具备SLAM雷达导航功能…

winform 中 panel 中添加可视对象错位问题

今天在写程序的时候&#xff0c;发现动态添加到panel_wokrarea中的按钮&#xff0c;同样是posx0&#xff0c;有时并不能对齐&#xff0c;会和当前窗口中panel_wokrarea在屏幕上的显示区域的最左边&#xff08;panel_wokrarea很宽&#xff09; 经分析&#xff0c;是因为panel 在…

SpringBoot框架下体育馆管理系统的构建

1引言 1.1课题背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理&#xff0c;这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制&#xff0c;不仅提高了工作效率&#xff0c;而且大大的提高了其…

Linux编译部署PHP环境

1.准备工作 安装前我们需要设置防护墙&#xff0c;开放端口&#xff0c;更新yum源 # 1.防火墙 systemctl status firewalld 看到active(running)就意味着防火墙打开了 systemctl stop firewalld 看到inactive(dead)就意味着防火墙关闭了 systemctl start fire…

19.1 使用k8s的sdk编写一个项目获取pod和node信息

本节重点介绍 : 引入k8s sdk获取k8s 的node和pod信息 定义相关metrics初始化k8s-client使用k8s-client get node使用k8s-client get pod打点 k8s中关注四大块指标总结 之前在k8s中关注4块指标有过总结 指标类型采集源应用举例发现类型grafana截图容器基础资源指标kubelet …

Autosar EcuM学习笔记-上电初始化执行函数及下电前执行函数

文章目录 前言Autosar标准EcuM启动时的初始化EcuM下电执行过程 总结 前言 Autosar启动和下电过程由EcuM控制&#xff0c;本文介绍EcuM中的初始化和下电前的执行函数 Autosar标准 EcuM启动时的初始化 在标准中&#xff0c;主核启动流程如下&#xff1a; 从核启动流程如下&a…