Vue3+elemetPlus支持动态路由和菜单管理UI框架。
这是一个基于VUECLI+Element-Plus * *的开源vue3动态路由和动态菜单开源框架。总的来说，这个项目非常好。使用它可以直接实现动态路由和菜单管理功能，实现快速开发。支持两级菜单管理和嵌套路由管理。
“元素加”:“^1.0.2-beta.70”，
“vue”:“^3.0.0”，
“vue路由器”:“^4.0.0-0”
1，UNIUICLI 3是基于vue3的项目，与时俱进，很有时代感，紧跟vue3的脚步。
2.项目只集成了两个必要的JavaScript库，element-plus和vue-router，没有集成其他的JavaScript库。这意味着你可以根据自己的项目需求安装自己需要的JavaScript库，避免项目集成库太多带来的麻烦。
3.强大的组件管理器。为了帮助您可视化地管理动态路线和菜单，我们内置了“组件管理”功能组件，使路线和菜单管理可视化。同时，为了更好的实现项目管理，我们在vue2版本的基础上增加了可选的json导出功能，让你可以快速生成json数据，生成用户权限路由和菜单。
4.美景框架。我们有一个内置的后台管理UI框架，通过它您可以快速生成和构建管理项目。当然，你也可以构建自己喜欢的UI框架结构。
5.干扰少。为了让项目更纯粹，给开发者更多的控制权，我们在src文件夹下新建了一个unitui文件夹来存放我们的内置部分。为了便于启动和理解您的项目，您可以直接清空ivews和components文件夹中的内容并重新构建您的组件，因为这些目录中的文件并不重要。
Unituicli3之所以强大，是因为组件管理，因为它是核心组件，使得动态路由(添加、删除、修改)、嵌套路由和菜单管理(添加、删除、修改)可视化，支持json数据生成，使得前后台交互成为可能。只需要将生成的json存储在数据库中，就可以实现权限编辑。
虽然我们尽量减少对开发者的影响，但是做一些改变是不可避免的。
从“vue”导入{ createApp }
从“element-plus”导入ElementPlus
从'导入应用程序。/App.vue '
从'导入路由器。/路由器'
import ' @/unitui/init _ route . js '//这是为了防止刷新路由丢失。
const app = createApp(App)
app.use(ElementPlus)
app.use(路由器)。挂载(#app)
//注册全局组件
从'导入Uicon。/unitui/sub/Uicon.vue '
app.component('Uicon '，Uicon)
如果你不用elementPlus作为你的UI，可以参考上面的，做适当的改动。
这是一个全局注册的图标选择器。您可以在任何组件中使用图标选择器，该组件安装在main.js文件中。如果不使用element，就需要进行修改，否则可能会影响图标选择的功能。
真实效果
这是一个非常重要的内置组件，主要用来模拟登录时的操作和信息生成。它读取位于assets/json/文件夹中的两个json生成菜单和路由信息，json内容模拟后端返回的内容。
其中最重要的是路线的生成。登录并路由json信息返回后，调用init_route方法。代码如下:
init_route(route_data) {
//根据后端返回的json数据生成路由。
const init _ route _ data =[]；//定义一个路由数组来存储生成的路由信息。
for(设索引= 0；index & lt路由_数据.长度；index++) {
//循环后端返回的json
//循环
if (route_data[index].孩子！=未定义){
//有子节点时生成路由数组的方法
init_route_data[index] = {
路径:route_data[index]。路径，//路由url。
名称:route_data[index]。name，//路由名称。
component:()= & gt；import(`@/${route_data[index])。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
//路由一些附加信息
show _ site:route _ data[索引]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。meta . web _ title//网站标题
},
子级:[] //嵌套路由
};
for(设I = 0；我& ltroute _ data[index]. children . length；i++) {
init _ route _ data[索引]。儿童[i] = {
路径:route _ data [index]。孩子[我]。路径，//路由url。
名称:route _ data [index]。孩子[我]。name，//路由名称。
component:()= & gt；import(`@/${route_data[index])。孩子[我]。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。孩子[我]。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
//路由一些附加信息
show _ site:route _ data[索引]。孩子[我]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。孩子[我]。meta . web _ title//网站标题。
}
};
}
}否则{
//生成无子路由数组的方法
init_route_data[index] = {
路径:route_data[index]。路径，//路由url。
名称:route_data[index]。name，//路由名称。
component:()= & gt；import(`@/${route_data[index])。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
show _ site:route _ data[索引]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。meta . web _ title//网站标题
}
};
//console . log(index)；
}
}
//console . log(init _ route _ data)；//打印生成初始化路由数组。
for(设索引= 0；index & lt路由_数据.长度；index++) {
//因为addRoutes已经被放弃，所以需要重新使用AddRoutes进行数组添加。
这个。$ router . add route(init _ route _ data[index])；//循环添加数组
}
this . init _ menu()；//执行菜单生成方法
},
其他三个可以随意修改。
在vue2的动态路由项目中，调用app.vue文件的mounted方法中的路由生成方法，可以刷新路由，防止路由丢失。但是在vue3中同样的方式会出现异常，因为我们在添加路由之前跳转，所以刷新后的页面上不会有内容，所以我们在unitui文件夹中新建一个init_route.js，在login.vue文件中写一些类似路由初始化的东西，然后在main.js中
Init_route.js内容
从' @/router '导入路由器
函数init_route() {
//根据后端返回的json数据生成路由。
if(session storage . getitem(" route _ data ")！= null) {
const route _ data = JSON . parse(session storage . getitem(" route _ data "))；
//console . log(route _ data)；
const init _ route _ data =[]；//定义一个路由数组来存储生成的路由信息。
for(设索引= 0；index & lt路由_数据.长度；index++) {
//循环后端返回的json
//循环
if (route_data[index].孩子！=未定义){
//有子节点时生成路由数组的方法
init_route_data[index] = {
路径:route_data[index]。路径，//路由url。
名称:route_data[index]。name，//路由名称。
component:()= & gt；import(`@/${route_data[index])。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
//路由一些附加信息
show _ site:route _ data[索引]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。meta . web _ title//网站标题
},
子级:[] //嵌套路由
};
for(设I = 0；我& ltroute _ data[index]. children . length；i++) {
init _ route _ data[索引]。儿童[i] = {
路径:route _ data [index]。孩子[我]。路径，//路由url。
名称:route _ data [index]。孩子[我]。name，//路由名称。
component:()= & gt；
import(`@/${route_data[index])。孩子[我]。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。孩子[我]。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
//路由一些附加信息
show _ site:route _ data[索引]。孩子[我]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。孩子[我]。meta . web _ title//网站标题。
}
};
}
}否则{
//生成无子路由数组的方法
init_route_data[index] = {
路径:route_data[index]。路径，//路由url。
名称:route_data[index]。name，//路由名称。
component:()= & gt；import(`@/${route_data[index])。组件} `)，
//component:(resolve)= & gt；require([`@/views/$ { route _ data[index])。component }`]，resolve)，//加载后端json描述的vue文件。
元:{
show _ site:route _ data[索引]。meta。show _ site，//是否全屏显示？
web _ title:route _ data[索引]。meta . web _ title//网站标题
}
};
//console . log(index)；
}
}
//console . log(init _ route _ data)；//打印生成初始化路由数组。
for(设索引= 0；index & lt路由_数据.长度；index++) {
//因为addRoutes已经被放弃，所以需要重新使用AddRoutes进行数组添加。
router . add route(init _ route _ data[index])；//循环添加数组
}
//将刷新放在这里
//console . log(' app ')；
//const index = window . location . href . lastindexof(" # ")
//const URL = window . location . href . substring(index+1，window . location . href . length)；
//这个。$router.push(url)
}
}
init_route()
main.js中的引用:
import ' @/unitui/init _ route . js '//这是为了防止刷新路由丢失。
至此，刷新自动初始化即可完成。
我们通过获取meta的值来控制显示位置。在app.vue文件中的route中显示_site(全屏显示0，视图显示1)，然后用v-if控制不同router-view的显示。
App.vue源代码:
1.如果不喜欢我们的ui框架，需要开发新的ui，没有ui框架的支持，组件管理的功能可能无法正常显示(空白显示)。您可以将文件unitui/ subadmin/ SubAdmin.vue中的样式部分更改为:
#sub_admin_back {
宽度:100%；
/*非ui框架把高度写成height:100 VH；*/
身高:100 VH；
背景-尺寸:封面；
位置:相对；
背景色:# ffffff
边框-半径:10px；
}
1，对框架的干扰还没有尽可能的减少，还是需要对main.js做适当的改动