Vue + Vite 动态菜单导入

适用于vue3+vite+element-plus+ts搭建的动态路由菜单解决方案

VUE3+vite+Ant Design+TS后台管理系统动态菜单实现流程以及问题解决

本章节着重介绍如何实现基于用户角色的动态菜单加载功能。

项目中遇到一个场景，页面的标题栏结构基本相同，只是图片需要动态改变，不同类型的页面，进入后，加载不同的图片。遇到问题，查官网。官网不懂，问博主。

vue3+vite项目搭建，安装启动停止，项目目录解构，组件说明，CSS导入方式，Vue3实现计数器....

我这个是纯前端的 目前项目在搭建阶段 所以可能有些不足 希望能给大伙带来一点参考。接口模拟我是用mock模拟的，有需求请在csdn中寻找。

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push。通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

Vue3+Vite+TS项目 Component动态引入组件

app.use(store) //再加载store,vuex中的store刷新后清空，否则把菜单放store里面也可以，如果使用vuex持久化插件，router和store的加载顺序得改过来。//进入路由守卫生再加载一次，因为路由间的转向不整体刷新网页，不执行上面的全新加载函数，比如，登陆前，本地前没有存放菜单数据，登陆后还未执行菜单数据拉取，这时候菜单可能为空。//加载菜单,验证是否登陆，登陆则发送加载菜单请求，否则不发送。//如刷新，重新从localstorage加载菜单。//从本地菜单数据加载菜单。

这段代码使用vite的import.meta.globEager来获取当前文件夹下所有以.js结尾的文件。然后通过遍历文件数组，将每个文件的默认导出对象添加到一个modules对象中，并以文件名作为对象属性名。最后导出modules对象。

假设你有一个src/pages/DynamicComponents目录，里面包含多个 Vue 组件，你想根据某些条件动态地导入这些组件。src/pages/DynamicComponents/ComponentA.vue文件。src/pages/DynamicComponents/ComponentB.vue文件。包起来就好了，我直接使用了markRaw来包起组件 ，就解决这个警告了。src/pages/index.vue文件。这里报了一个警告：提示你去给组件使用。

然后，我们遍历这些模块，通过它们的路径生成路由。这样，你只需要将组件放入。来导入目录下的多个Vue组件，并自动生成路由。在Vite中使用Vue 3，你可以使用。目录，无需手动向路由器添加每个组件。

当前项目是根据vue-element-admin使用vue3重构的后台管理系统 从后台获取动态菜单并且路由懒加载 后台返回的数据结构 "code": 0, "msg": "成功", "data": [ { "path": "/administrator", "meta": { "title": "后台管理", "icon": "icon-a-zu4", "roles": [ "admin"

vite+vue3组件的动态导入方式

请求后端，获取路由数据，处理数据，然后放进router中

1，在做权限的时候，从后台拉路由表，然后动态引入组件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法 //引入所有views下.vue文件 const modules = import.meta.glob("../views/**/**.vue"); /** * 解析路由表 * @param routerMap 后台请求的路由表 * @returns 系统路由 */ export const routerFilterFunc = (routerMap: RouterIte