import {createRouter, createWebHashHistory} from 'vue-router'; import { ElNotification } from 'element-plus'; import config from "@/config" import NProgress from 'nprogress' import 'nprogress/nprogress.css' import tool from '@/utils/tool'; import systemRouter from './systemRouter'; import userRoutes from '@/config/route'; import {beforeEach, afterEach} from './scrollBehavior'; //系统路由 const routes = systemRouter //系统特殊路由 const routes_404 = { path: "/:pathMatch(.*)*", hidden: true, component: () => import(/* webpackChunkName: "404" */ '@/layout/other/404'), } let routes_404_r = ()=>{} const router = createRouter({ history: createWebHashHistory(), routes: routes }) //设置标题 document.title = config.APP_NAME //判断是否已加载过动态/静态路由 var isGetRouter = false; router.beforeEach(async (to, from, next) => { NProgress.start() //动态标题 document.title = to.meta.title ? `${to.meta.title} - ${config.APP_NAME}` : `${config.APP_NAME}` let token = tool.cookie.get("TOKEN"); if(to.path === "/login"){ //删除路由(替换当前layout路由) router.addRoute(routes[0]) //删除路由(404) routes_404_r() isGetRouter = false; next(); return false; } if(routes.findIndex(r => r.path === to.path) >= 0){ next(); return false; } if(!token){ next({ path: '/login' }); return false; } //整页路由处理 if(to.meta.fullpage){ to.matched = [to.matched[to.matched.length-1]] } //加载动态/静态路由 if(!isGetRouter){ let apiMenu = tool.data.get("MENU") || [] let userInfo = tool.data.get("USER_INFO") let userMenu = treeFilter(userRoutes, node => { return node.meta.role ? node.meta.role.filter(item=>userInfo.role.indexOf(item)>-1).length > 0 : true }) let menu = [...userMenu, ...apiMenu] var menuRouter = filterAsyncRouter(menu) menuRouter = flatAsyncRoutes(menuRouter) menuRouter.forEach(item => { router.addRoute("layout", item) }) routes_404_r = router.addRoute(routes_404) if (to.matched.length == 0) { router.push(to.fullPath); } isGetRouter = true; } beforeEach(to, from) next(); }); router.afterEach((to, from) => { afterEach(to, from) NProgress.done() }); router.onError((error) => { NProgress.done(); ElNotification.error({ title: '路由错误', message: error.message }); }); //入侵追加自定义方法、对象 router.sc_getMenu = () => { var apiMenu = tool.data.get("MENU") || [] let userInfo = tool.data.get("USER_INFO") let userMenu = treeFilter(userRoutes, node => { return node.meta.role ? node.meta.role.filter(item=>userInfo.role.indexOf(item)>-1).length > 0 : true }) var menu = [...userMenu, ...apiMenu] return menu } //转换 function filterAsyncRouter(routerMap) { const accessedRouters = [] routerMap.forEach(item => { item.meta = item.meta?item.meta:{}; //处理外部链接特殊路由 if(item.meta.type=='iframe'){ item.meta.url = item.path; item.path = `/i/${item.name}`; } //MAP转路由对象 var route = { path: item.path, name: item.name, meta: item.meta, redirect: item.redirect, children: item.children ? filterAsyncRouter(item.children) : null, component: loadComponent(item.component) } accessedRouters.push(route) }) return accessedRouters } function loadComponent(component){ if(component){ return () => import(/* webpackChunkName: "[request]" */ `@/views/${component}`) }else{ return () => import(`@/layout/other/empty`) } } //路由扁平化 function flatAsyncRoutes(routes, breadcrumb=[]) { let res = [] routes.forEach(route => { const tmp = {...route} if (tmp.children) { let childrenBreadcrumb = [...breadcrumb] childrenBreadcrumb.push(route) let tmpRoute = { ...route } tmpRoute.meta.breadcrumb = childrenBreadcrumb delete tmpRoute.children res.push(tmpRoute) let childrenRoutes = flatAsyncRoutes(tmp.children, childrenBreadcrumb) childrenRoutes.map(item => { res.push(item) }) } else { let tmpBreadcrumb = [...breadcrumb] tmpBreadcrumb.push(tmp) tmp.meta.breadcrumb = tmpBreadcrumb res.push(tmp) } }) return res } //过滤树 function treeFilter(tree, func) { return tree.map(node => ({ ...node })).filter(node => { node.children = node.children && treeFilter(node.children, func) return func(node) || (node.children && node.children.length) }) } export default router