vite vue3 import.meta.glob动态路由

在Vite中使用Vue 3,你可以使用import.meta.glob来导入目录下的多个Vue组件,并自动生成路由。以下是一个简单的例子:

router/index.js


// router/index.js
import { createRouter, createWebHistory } from 'vue-router';// 自动导入views目录下的所有.vue文件
const modules = import.meta.glob('/src/views/*.vue');const routes = Object.keys(modules).map((path) => {const componentName = path.split('/').pop().split('.')[0];return {path: `/${componentName=='HomeView'?'/':componentName}`,component: modules[`${path}`].default || modules[`${path}`],};
});const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,
});export default router;

App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/AboutView">About</RouterLink></nav></div></header><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

 

在上面的代码中,import.meta.glob用于获取/src/views/目录下所有的.vue文件。然后,我们遍历这些模块,通过它们的路径生成路由。这样,你只需要将组件放入views目录,无需手动向路由器添加每个组件。

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

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

相关文章

基于Spring Boot的在线学习系统的设计与实现

基于Spring Boot的在线学习系统的设计与实现 摘 要 在线学习系统是以大学传统线下教学方式不适应信息技术的迅速发展为背景&#xff0c;提高学习效率&#xff0c;解决传统教学问题&#xff0c;并且高效的实现教学信息化的一款软件系统。为了更好的实现对于教学和学生的管理&a…

词令外卖节红包天天神券每天领取直达入口

词令外卖节红包天天领直达入口 1、打开「词令」关键词口令直达微信小程序&#xff1b; 2、输入词令「外卖红包88」关键词直达口令&#xff1b; 3、搜索直达进入外卖红包天天领入口&#xff0c;即可成功领取外卖节红包和天天神券点外卖可享受券后价优惠&#xff1b; *温馨提醒&…

HTML5通过api实现拖放效果 dataTransfer对象

dataTransfer对象 说明&#xff1a;dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性&#xff0c;所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部&#xff0c;可以使用这个对象的属性和方法实现拖放功能…

springboot3.2.4+Mybatis-plus在graalvm21环境下打包exe

springboot3.2.4Mybatis-plus在graalvm21环境下打包exe 前提条件为之前已经能直接打包springboot3.2.4项目了然后在此基础上接入Mybatis-plus&#xff0c;然后能够正常进行打包exe并且执行&#xff0c;参考之前的文章进行打包 核心配置如下 package com.example.demo.config…

无药可医还能怎么办?越没本事的人,越喜欢从别人身上找原因!——早读(逆天打工人爬取热门微信文章解读)

无药可医的病该怎么办呢&#xff1f; 引言Python 代码第一篇 洞见 《骆驼祥子》&#xff1a;越没本事的人&#xff0c;越喜欢从别人身上找原因第二篇 人民日报 来啦 新闻早班车要闻社会政策 结尾 “吾日三省吾身&#xff0c;而后深知自助者天助之。” 在人生的迷宫中 遭遇困境时…

android 音视频基础知识--个人笔记

avi&#xff0c;mkv封装格式数据------》音频流&#xff0c;视频流//字母流&#xff08;国外会分开&#xff09; ----〉解封装&#xff0c;解复用打开封装格式 -----》视频压缩数据---压缩H264&#xff0c;H265 -------〉视频解码 ----》原始数据YUV -----〉音频压缩数据---…

uniapp-打包IOS的APP流程

打包前所需配置 在manifest文件内配置 1. APP图标 2. 启动界面 有三种启动界面配置 第一种是 HBuilderX 官方给的通用启动界面&#xff0c;页面单一&#xff0c;屏幕中间就一个圆框图标 第二种是自定义的启动图&#xff0c;无法通过AppStore的审核 第三种是自定义storyboard启动…

论文研读:Transformers Make Strong Encoders for Medical Image Segmentation

论文&#xff1a;TransUNet&#xff1a;Transformers Make Strong Encoders for Medical Image Segmentation 目录 Abstract Introduction Related Works 各种研究试图将自注意机制集成到CNN中。 Transformer Method Transformer as Encoder 图像序列化 Patch Embed…

实现一个栈数据结构

实现一个栈数据结构 实现一个栈数据结构是一个基础但重要的编程任务。栈是一种后进先出&#xff08;LIFO&#xff09;的数据结构&#xff0c;它允许我们在一端添加或删除元素。在栈中&#xff0c;最后添加的元素总是最先被删除&#xff0c;这类似于一堆盘子&#xff1a;新盘子…

特殊数据类型

目录 记录类型 定义一个记录类型 myrecord_type&#xff0c;用于存储 emp 数据表中的员工姓名和职务 %TYPE 类型 定义一个变量&#xff0c;存储数据表 emp 中编号为 7369 的员工姓名&#xff0c;并且显示出结果 %ROWTYPE 类型 声明一个用于存储 emp 数据表中每行记录的变…

【力扣每日一题】2908. 元素和最小的山形三元组 I

LC2908. 元素和最小的山形三元组 I 给你一个下标从 0 开始的整数数组 nums 。 如果下标三元组 (i, j, k) 满足下述全部条件&#xff0c;则认为它是一个 山形三元组 &#xff1a; i < j < k nums[i] < nums[j] 且 nums[k] < nums[j] 请你找出 nums 中 元素和最小…

【力扣hot100】160.相交链表

相交链表 给你两个单链表的头节点 headA和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回…

hibernate映射文件详解

hibernate映射文件 映射文件在.hbm.xml文件中编写 <?xml version"1.0" encoding"UTF-8"?><!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD//EN" "http://www.hibernate.org/dtd/hiberna…

牛客练习赛123 A~C

A.炸鸡块哥哥的粉丝题 输出字符串的前 ⌈ n 2 ⌉ \lceil \frac{n}{2} \rceil ⌈2n​⌉ 个字符 void solve() {int n;string s;cin >> n >> s;cout << s.substr(0, (n 1) / 2); }B.智乃想考一道鸽巢原理 当小球总个数为奇数时&#xff0c;贪心的留下 1 个…

天梯算法Day3整理

浮点数解析 炸鱼题掠过 冲突值 题面 解析 方法一 —— 并查集 按照边值排序&#xff0c;然后按边值从大到小遍历&#xff0c;通过并查集判断能否将所有点无冲突地归于两个集合。在判断时&#xff0c;若有两个点不得不产生冲突&#xff0c;则输出这两个点之间的边值并结束。…

LeetCode Python - 81. 搜索旋转排序数组 II

目录 题目描述解法运行结果 题目描述 已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必互不相同。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转 &#xff0c;使数组变为 […

<商务世界>《第28课 商务旅行的注意事项》

1 选择人气旺的酒店 酒店找一个旺气的地方。1是干净、整洁是最重要的。2是在选择酒店的时候尽量选择闹市&#xff0c;人口要集中的地方&#xff0c;这样入住率有保证&#xff0c;人多气场旺不至于发生一些灵异事件。而且人少屋多&#xff0c;也会让我们没有安全感。 2 避免无…

关于AllOriginSubtypes和AllDestinationSubtypes拓扑检查官方文档有误导

目录 1.问题描述&#xff1a; 2.有问题的代码&#xff1a; 3.修改能正确执行的代码 &#xff1a; 1.问题描述&#xff1a; 当两个要素类参与拓扑时&#xff0c;官方有一段代码&#xff0c;将拓扑规则加到拓扑中 ITopologyRule.AllOriginSubtypes Property Indicates if al…

好用还平价的挂耳式耳机有哪些?五款超平价品牌测评推荐

在数字化时代&#xff0c;耳机已经成为我们日常生活中不可或缺的一部分。而开放式耳机作为一种新兴趋势&#xff0c;以其独有的开放性设计和卓越的音质表现&#xff0c;正在悄然改变着人们的听音习惯。不同于传统的耳机产品&#xff0c;开放式耳机让音乐与外界环境相得益彰&…

【GSAP】ScrollTrigger插件的注意事项 | 用的好,非常流畅。用的不好,卡到爆炸的前端动画库

问题描述 调用gsap插件的ScrollTrigger的batch方法时 &#xff0c;有以下2种情况之一要进行垃圾回收处理&#xff0c;若不做处理会导致页面超级卡顿。 在动画运行完毕&#xff0c;不再使用动画时元素被删除时 例子 给当前动画一个id&#xff0c;是因为后期不用此动画时&…