vue动态配置路由

文章目录

  • 前言
  • 定义项目页面格式
  • 一、vite 配置动态路由
    • 新建 `/router/utils.ts`
    • 引入 `/router/utils.ts`
  • 二、webpack 配置动态路由
  • 总结
    • `如有启发,可点赞收藏哟~`


前言

项目中动态配置路由可以减少路由配置时间,并可减少配置路由出现的一些奇奇怪怪的问题
路由配置化可统一定义相关属性等
本文记录vitewebppack两种构建工具配置动态路由,


定义项目页面格式

页面定义最好同时定义对应的titlename

  • 以views目录的page-template为例

在这里插入图片描述

  • page-template/index.ts文件
import { defineComponent, h, defineAsyncComponent } from 'vue';const PageComponent = defineAsyncComponent(() => import('./components/index.vue'));export default defineComponent({// 配置后可在 动态获取路由配置中设置对应值title: '页面模版',name: 'PageTemplate',setup() {return () => h(PageComponent);},
});
  • page-template/components/index.ts文件
import { defineComponent } from 'vue'
export default defineComponent({setup() {return {};},
});
  • page-template/components/index.vue文件
<script lang="ts" src="./index.ts" /><template><div>template</div>
</template><style scoped lang="less"></style>

一、vite 配置动态路由

vite使用import.meta.glob动态获取文件

新建 /router/utils.ts

/*** 路由配置文件*/import { DEFAULT_DOCUMENT_TITLE } from '@/const/base';
import type { RouteRecordRaw } from 'vue-router';function getComponent() {return import.meta.glob('../views/**/index.ts', { eager: true });
}// 获取路由文件
export const vueRouters = (): RouteRecordRaw[] => {const routerList: RouteRecordRaw[] = [];const files = getComponent();Object.keys(files).forEach((fileSrc: string) => {const component = files[fileSrc] as any;const componentPath = fileSrc.replace(/^\.\//, '');const routerPath = componentPath.replace('../views', '').replace(/\/index.ts$/, '');if (!componentPath.includes('components')) {routerList.push({path: routerPath,name: component.default.name,component: () => import(/* @vite-ignore */componentPath),meta: {title: component.default.title || DEFAULT_DOCUMENT_TITLE,// skeleton: component.skeleton, // TODO 待处理页面骨架屏// background: component.backgroundColor, // TODO 待处理页面级别颜色},});}});return routerList;
};

引入 /router/utils.ts

/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/layout/index";
import { vueRouters } from "./utils";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [......vueRouters()],
});
export default router;

在这里插入图片描述

二、webpack 配置动态路由

webpack使用require.context获取文件路径

  • /router/utils.ts
/*** 路由配置文件*/import { DEFAULT_DOCUMENT_TITLE } from '@/const/base';
import type { RouteRecordRaw } from 'vue-router';function getComponent() {return require.context('../views', true, /\.ts$/);
}// 获取路由文件
export const vueRouters = (): RouteRecordRaw[] => {const routerList: RouteRecordRaw[] = [];const requireRouters = getComponent();requireRouters.keys().forEach((fileSrc: string) => {const viewSrc = requireRouters(fileSrc);const component = viewSrc.default;const componentPath = fileSrc.replace(/^\.\//, '');const routerPath = componentPath.replace(/(\S+)index.ts$/, '/$1index.html');if (component.name !== 'Home' && !component.isOffLine) {routerList.push({path: routerPath,name: component.name,component: () => import(`@/views/${componentPath}`),meta: {title: component.title || DEFAULT_DOCUMENT_TITLE,},});}});return routerList;
};export default vueRouters();

使用同vite


总结

vite 和 webpack 不同于获取文件格式,获取后的操作基本一致

如有启发,可点赞收藏哟~

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

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

相关文章

vue将base64编码转为pdf方法

<iframe width"100%" height"100%" src"" frameborder"0" id"iframe"></iframe>使用方法: 直接调用就行 viewPdf(传入base64编码即可)//content是base64编码格式const viewPdf (content:any)> {const blob …

为什么选择B+树作为数据库索引结构?

背景 首先&#xff0c;来谈谈B树。为什么要使用B树&#xff1f;我们需要明白以下两个事实&#xff1a; 【事实1】 不同容量的存储器&#xff0c;访问速度差异悬殊。以磁盘和内存为例&#xff0c;访问磁盘的时间大概是ms级的&#xff0c;访问内存的时间大概是ns级的。有个形象…

抖音运营的必备10个工具,开启智能拓客引流新时代!

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 亲爱的知友们&#xff0c;您们是否对抖音运营有浓厚的兴趣和独特的见解&#xff1f;今天&#xff0c;我将为您介绍一些抖音运营必备的工具&#xff0c;帮助您在抖音上脱颖…

windows通过命令给文件夹或文件增加权限

给Demo001追加everyone权限 D:\cmd>cacls Demo001 /p everyone:f /e 处理的目录: D:\cmd\Demo001D:\cmd> 给Demo001下的所有文件追加everyone权限 D:\cmd>cacls Demo001 /p everyone:f /e /t 处理的目录: D:\cmd\Demo001 处理的目录: D:\cmd\Demo001\A 处理的文件:…

SpringMvc请求原理流程

springmvc是用户和服务沟通的桥梁&#xff0c;官网提供了springmvc的全面使用和解释&#xff1a;DispatcherServlet :: Spring Framework 流程 1.Tomcat启动 2.解析web.xml文件&#xff0c;根据servlet-class找到DispatcherServlet&#xff0c;根据init-param来获取spring的…

Mysql 千万级别查询优化

经常碰到慢查询报警&#xff0c;我们线上的慢sql阈值是1s&#xff0c;出现报警的表数据有 7000多万&#xff0c;经常出现报警的是一个group by的count查询&#xff0c;于是便开始着手优化这块&#xff0c;记录下自己优化过程中的心得 拿下面这张表举例&#xff0c;这是一张记录…

Android Native崩溃信息分析和 工具(addr2line和ndkstack)使用

这里以一个实际的crash案例未demo进行分析和讲解。针对native的崩溃信息。一般来讲&#xff0c;较快的方式是直接检索到backtrace&#xff0c;然后通过分析和使用工具addr2line和 ndk-stack等定位到出问题的地方。这里截取了一段 崩溃日志&#xff0c;具体如下&#xff1a; 01…

2311ddip1000不能从函数返回域引用

原文 以下程序无法用-previewdip1000编译: void main() safe {int[3] a [1, 2, 3];int[] slice;//好slice a[];scope ref getSlice() { return slice; }//错误:把对a局部变量的引用赋值给非域getSlice()getSlice() a[]; }getSlice应该可返回可安全地赋值给a[]的引用. 如常…

QtC++与QColumnView详解

介绍 在 Qt 中&#xff0c;QColumnView 是用于显示多列数据的控件&#xff0c;它提供了一种多列列表视图的方式&#xff0c;类似于文件资源管理器中的详细视图。QColumnView 是基于模型/视图架构的&#xff0c;通常与 QFileSystemModel 或自定义模型一起使用。 以下是关于 QC…

【文末送书】计算机网络 | IO多路转接技术 | poll/epoll详解

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

前端对用户名密码加密处理,后端解密

一. 正常表单提交如图&#xff0c;可以看见输入的用户名密码等 二. 使用crypto-js.min.js进行前端加密处理 js资源地址链接&#xff1a;https://pan.baidu.com/s/1kfQZ1SzP6DUz50D–g_ziQ 提取码&#xff1a;1234 前端代码 <script type"text/javascript" src&q…

C#8.0本质论第十四章--事件

C#8.0本质论第十四章–事件 委托本身是一个更大的模式(Pattern)的基本单位&#xff0c;称为Publish-Subscribe(发布-订阅)或Observer(观察者)。 14.1使用多播委托实现Publish-Subscribe模式 14.1.1定义订阅者方法 public class Cooler {public Cooler(float temperature){T…

java命令 jmap 堆参数分析

jmap -heap pid 展示pid的整体堆信息 bash-4.4# jmap -heap 10 Attaching to process ID 10, please wait... Debugger attached successfully. Server compiler detected. JVM version is 25.172-b11using thread-local object allocation. Garbage-First (G1) GC with 8 th…

给EmEditor添加自定义外部工具DuilibPreviewer

duilib是一款xml描述UI布局的优秀的c开源界面库&#xff0c;为了方便开发布局UI&#xff0c;有网友制作了预览工具DuilibPreviewer&#xff0c;源码链接https://github.com/juhuaguai/duilib/tree/master/DuilibPreview。 为了进一步方便开发&#xff0c;便于随时预览自己用xm…

kettle创建数据库资源库kettle repository manager

数据库资源库是将作业和转换相关的信息存储在数据库中&#xff0c;执行的时候直接去数据库读取信息&#xff0c;很容易跨平台使用。 创建数据库资源库&#xff0c;如图 1.点击Connect 2.点击Repository Manager 3.点击Other Repository 4.点击Database Repository 在选择Ot…

AI监管规则:各国为科技监管开辟了不同的道路

AI监管规则&#xff1a;各国为科技监管开辟了不同的道路 一份关于中国、欧盟和美国如何控制AI的指南。 编译 李升伟 茅 矛 &#xff08;特趣生物科技有限公司&#xff0c;广东深圳&#xff09; 插图&#xff1a;《自然》尼克斯宾塞 今年5月&#xff0c;科技公司OpenAI首席…

深兰科技成功入选《2023年度国家知识产权优势企业名单》

2023年11月13日&#xff0c;国家知识产权局正式公布了《2023年度国家知识产权优势企业的名单》(以下简称“《名单》”)。深兰人工智能科技(上海)股份有限公司成功入选&#xff0c;荣获“国家知识产权优势企业”称号。 “国家知识产权优势企业”是指企业经营范围属于国家重点发展…

CUDA安装

在cmd中输入nvidia-smi。显示CUDA Version&#xff1a;12.3&#xff0c;所以只能下载小于等于12.3的版本。如下图&#xff1a; 进这个网址&#xff1a;https://developer.nvidia.com/cuda-toolkit-archive 选择一个版本下载。 选择完后之后这样选择&#xff1a; 最后点击下载即…

综述:目标检测二十年(机翻版)(未完

原文地址 20年来的目标检测&#xff1a;一项调查 摘要关键词一 介绍二 目标检测二十年A.一个目标检测的路线图1)里程碑&#xff1a;传统探测器Viola Jones探测器HOG检测器基于可变形零件的模型&#xff08;DPM&#xff09; 2)里程碑&#xff1a;基于CNN的两阶段探测器RCNNSPPN…

axios升级依赖版本后报错SyntaxError: Cannot use import statement outside a module

Axios构建为ES模块&#xff0c;而不是在Node中运行时的CommonJs。Jest的问题是它在Node中运行代码。这就是为什么告诉Jest转换Axios有效的原因。 Axios SDK附带了一个用于Node env的内置CommonJs文件。因此&#xff0c;我们可以通过将以下内容添加到您的package.json来修复它&a…