代码拉取完成，页面将自动刷新
同步操作将从 科技兽/unituicli3 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
一个基于vuecli+element-plus共同搭建的一个开源动态路由和动态菜单开源管理框架，总体来说这个项目是非常优秀的。 1、unituicli3是一个基于vue3搭建的一个项目，它是非常与时俱进的，极具时代性。 2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何js库。这也就意味着你可以根据自己的项目需要去安装自己喜欢的JavaScript库以免因为项目集成项目过多给你带来烦恼。
"dependencies": {
"core-js": "^3.6.5",
"element-plus": "^1.0.2-beta.70",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
3、强劲的组件管理器，我们为了使你更好地动态管理路由和菜单，我们内置了路由和菜单管理器使路由和菜单管理异常简单。
同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出，让你可以快速实现json数据生成，快速生成用户权限。
4、美丽的视图框架，我们内置了一个视图框架，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的ui框架。
5、更少的干扰。为了让项目更加纯净我们新建了unitui目录位于src文件夹下，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，这些并不重要。
//以下内容成功执行的前提是，你已具备[node](https://nodejs.org/zh-cn/)+[vuecli](https://cli.vuejs.org/zh/guide/)环境
1、可以通过clone或下载压缩包获取项目文件
2、在项目目录执行 npm install
1、router默认加载一些静态路由
import {
createRouter,
createWebHashHistory
} from 'vue-router'
const routes = [{
path: '/',
name: 'Home',
redirect: '/login'
},
{
path: '/login', //路由url
name: 'login', //路由名称
component: () => import('@/unitui/pages/Login.vue'), //加载模板文件
meta: {
show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
web_title: "登录" //网站标题
}
},
{
path: '/register', //路由url
name: 'register', //路由名称
component: () => import('@/unitui/pages/Register.vue'), //加载模板文件
meta: {
show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
web_title: "登录" //网站标题
}
},
{
path: '/forget', //路由url
name: 'forget', //路由名称
component: () => import('@/unitui/pages/Forget.vue'), //加载模板文件
meta: {
show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
web_title: "登录" //网站标题
}
},
{
path: '/404', //路由url
name: '404', //路由名称
component: () => import('@/unitui/pages/404.vue'), //加载模板文件
meta: {
show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
web_title: "404" //网站标题
}
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to, ) => {
document.title = to.meta.web_title //生成网站标题
// console.log(to);
// console.log(from);
// ...
// 返回 false 以取消导航
// return false
})
export default router
2、main.js做出如下调整。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'
import router from './router'
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
// 注册全局组件
import Uicon from './unitui/sub/Uicon.vue'
app.component('Uicon',Uicon)
3、核心代码/unitui/init_route.js即动态路由生成功能，如果你不是使用element你要参考这个代码进行路由生成。
import router from '@/router'
function init_route() {
//依据后端返回的json数据生成路由
if (sessionStorage.getItem("route_data") != null) {
const route_data = JSON.parse(sessionStorage.getItem("route_data"));
// console.log(route_data);
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index < route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i < route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () =>
import(`@/${route_data[index].children[i].component}`),
// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index < route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
router.addRoute(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);
// this.$router.push(url)
}
}
init_route()//这里是调用该函数
你可以给我点小心心，或者关注我
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。