From 6764e9f31103df6ddd2cd1a171ad2841704ea81a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= Date: Sat, 3 Jul 2021 16:51:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=BB=E6=8E=89=E6=97=A0=E7=94=A8?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/async/config.async.js | 24 -------- src/router/async/router.map.js | 56 ------------------- src/router/config.js | 10 ++-- src/utils/routerUtil.js | 94 ++++++++++++-------------------- 4 files changed, 40 insertions(+), 144 deletions(-) delete mode 100644 src/router/async/config.async.js delete mode 100644 src/router/async/router.map.js diff --git a/src/router/async/config.async.js b/src/router/async/config.async.js deleted file mode 100644 index 654a293..0000000 --- a/src/router/async/config.async.js +++ /dev/null @@ -1,24 +0,0 @@ -import routerMap from './router.map' -import {parseRoutes} from '@/utils/routerUtil' - -// 异步路由配置 -const routesConfig = [ - 'login', - 'root', - { - router: 'exp404', - path: '*', - name: '404' - }, - { - router: 'exp403', - path: '/403', - name: '403' - } -] - -const options = { - routes: parseRoutes(routesConfig, routerMap) -} - -export default options diff --git a/src/router/async/router.map.js b/src/router/async/router.map.js deleted file mode 100644 index c015113..0000000 --- a/src/router/async/router.map.js +++ /dev/null @@ -1,56 +0,0 @@ -// 视图组件 -const view = { - tabs: () => import('@/pages/frame/view/template/TabsTemplateView'), - page: () => import('@/pages/frame/view/template/PageTemplateView'), -}; - -// 路由组件注册 -const routerMap = { - login: { - authority: '*', - path: '/login', - component: () => import('@/pages/frame/view/login'), - }, - root: { - path: '/', - name: '首页', - redirect: '/login', - component: view.tabs, - }, - exp403: { - authority: '*', - name: '403错误', - path: '403', - component: () => import('@/pages/frame/view/exception/403'), - }, - exp404: { - name: '404错误', - path: '404', - component: () => import('@/pages/frame/view/exception/404'), - }, - exp500: { - name: '500错误', - path: '500', - component: () => import('@/pages/frame/view/exception/500'), - }, - dashboard: { - name: 'Dashboard', - }, - workbench: { - name: '工作台', - component: () => import('@/pages/dashboard/workbench'), - }, - analysis: { - name: '分析页', - component: () => import('@/pages/dashboard/analysis'), - }, - system_management: { - name: '系统管理', - component: view.page, - }, - menu_management: { - name: '菜单管理', - component: () => import('@/pages/system/view/menu'), - }, -}; -export default routerMap; diff --git a/src/router/config.js b/src/router/config.js index 26b3658..6228b3c 100644 --- a/src/router/config.js +++ b/src/router/config.js @@ -9,11 +9,6 @@ const options = { name: '登录页', component: () => import('@/pages/frame/view/login'), }, - { - path: '*', - name: '404', - component: () => import('@/pages/frame/view/exception/404'), - }, { path: '/403', name: '403', @@ -154,6 +149,11 @@ const options = { }, ], }, + { + path: '*', + name: '404', + component: () => import('@/pages/frame/view/exception/404'), + }, ], }; diff --git a/src/utils/routerUtil.js b/src/utils/routerUtil.js index 09a9caf..e41d826 100644 --- a/src/utils/routerUtil.js +++ b/src/utils/routerUtil.js @@ -1,8 +1,5 @@ -import routerMap from "@/router/async/router.map"; -import { mergeI18nFromRoutes } from "@/utils/i18nUtil"; -import Router from "vue-router"; -import deepMerge from "deepmerge"; -import basicOptions from "@/router/async/config.async"; +import { mergeI18nFromRoutes } from '@/utils/i18nUtil'; +import deepMerge from 'deepmerge'; //应用配置 let appOptions = { @@ -29,20 +26,20 @@ function setAppOptions(options) { */ function parseRoutes(routesConfig, routerMap) { let routes = []; - routesConfig.forEach((item) => { + routesConfig.forEach(item => { // 获取注册在 routerMap 中的 router，初始化 routeCfg let router = undefined, routeCfg = {}; - if (typeof item === "string") { + if (typeof item === 'string') { router = routerMap[item]; routeCfg = { path: (router && router.path) || item, router: item }; - } else if (typeof item === "object") { + } else if (typeof item === 'object') { router = routerMap[item.router]; routeCfg = item; } if (!router) { console.warn(`can't find register for router ${routeCfg.router}, please register it in advance.`); - router = typeof item === "string" ? { path: item, name: item } : item; + router = typeof item === 'string' ? { path: item, name: item } : item; } // 从 router 和 routeCfg 解析路由 const route = { @@ -52,7 +49,11 @@ function parseRoutes(routesConfig, routerMap) { redirect: routeCfg.redirect || router.redirect, meta: { authority: - routeCfg.authority || router.authority || routeCfg.meta?.authority || router.meta?.authority || "*", + routeCfg.authority || + router.authority || + routeCfg.meta?.authority || + router.meta?.authority || + '*', icon: routeCfg.icon || router.icon || routeCfg.meta?.icon || router.meta?.icon, page: routeCfg.page || router.page || routeCfg.meta?.page || router.meta?.page, link: routeCfg.link || router.link || routeCfg.meta?.link || router.meta?.link, @@ -74,51 +75,26 @@ function parseRoutes(routesConfig, routerMap) { * @param routesConfig {RouteConfig[]} 路由配置 */ function loadRoutes(routesConfig) { - // 应用配置 const { router, store, i18n } = appOptions; // 如果 routesConfig 有值，则更新到本地，否则从本地获取 if (routesConfig) { - store.commit("accountModule/setRoutesConfig", routesConfig); + store.commit('accountModule/setRoutesConfig', routesConfig); } else { - routesConfig = store.getters["accountModule/routesConfig"]; - } - // 如果开启了异步路由，则加载异步路由配置 - const asyncRoutes = store.state.settingModule.asyncRoutes; - if (asyncRoutes) { - if (routesConfig && routesConfig.length > 0) { - const routes = parseRoutes(routesConfig, routerMap); - const finalRoutes = mergeRoutes(basicOptions.routes, routes); - formatRoutes(finalRoutes); - router.options = { ...router.options, routes: finalRoutes }; - router.matcher = new Router({ ...router.options, routes: [] }).matcher; - router.addRoutes(finalRoutes); - } + routesConfig = store.getters['accountModule/routesConfig']; } + // 提取路由国际化数据 mergeI18nFromRoutes(i18n, router.options.routes); // 初始化Admin后台菜单数据 - const rootRoute = router.options.routes.find((item) => item.path === "/"); + const rootRoute = router.options.routes.find(item => item.path === '/'); const menuRoutes = rootRoute && rootRoute.children; if (menuRoutes) { - store.commit("settingModule/setMenuData", menuRoutes); + store.commit('settingModule/setMenuData', menuRoutes); } } -/** - * 合并路由 - * @param target {Route[]} - * @param source {Route[]} - * @returns {Route[]} - */ -function mergeRoutes(target, source) { - const routesMap = {}; - target.forEach((item) => (routesMap[item.path] = item)); - source.forEach((item) => (routesMap[item.path] = item)); - return Object.values(routesMap); -} - /** * 深度合并路由 * @param target {Route[]} @@ -127,9 +103,9 @@ function mergeRoutes(target, source) { */ function deepMergeRoutes(target, source) { // 映射路由数组 - const mapRoutes = (routes) => { + const mapRoutes = routes => { const routesMap = {}; - routes.forEach((item) => { + routes.forEach(item => { routesMap[item.path] = { ...item, children: item.children ? mapRoutes(item.children) : undefined, @@ -144,8 +120,8 @@ function deepMergeRoutes(target, source) { const merge = deepMerge(tarMap, srcMap); // 转换为 routes 数组 - const parseRoutesMap = (routesMap) => { - return Object.values(routesMap).map((item) => { + const parseRoutesMap = routesMap => { + return Object.values(routesMap).map(item => { if (item.children) { item.children = parseRoutesMap(item.children); } else { @@ -162,10 +138,10 @@ function deepMergeRoutes(target, source) { * @param routes 路由配置 */ function formatRoutes(routes) { - routes.forEach((route) => { + routes.forEach(route => { const { path } = route; - if (!path.startsWith("/") && path !== "*") { - route.path = "/" + path; + if (!path.startsWith('/') && path !== '*') { + route.path = '/' + path; } }); formatAuthority(routes); @@ -177,19 +153,19 @@ function formatRoutes(routes) { * @param pAuthorities 父级路由权限配置集合 */ function formatAuthority(routes, pAuthorities = []) { - routes.forEach((route) => { + routes.forEach(route => { const meta = route.meta; - const defaultAuthority = pAuthorities[pAuthorities.length - 1] || { permission: "*" }; + const defaultAuthority = pAuthorities[pAuthorities.length - 1] || { permission: '*' }; if (meta) { let authority = {}; if (!meta.authority) { authority = defaultAuthority; - } else if (typeof meta.authority === "string") { + } else if (typeof meta.authority === 'string') { authority.permission = meta.authority; - } else if (typeof meta.authority === "object") { + } else if (typeof meta.authority === 'object') { authority = meta.authority; const { role } = authority; - if (typeof role === "string") { + if (typeof role === 'string') { authority.role = [role]; } if (!authority.permission && !authority.role) { @@ -214,9 +190,9 @@ function formatAuthority(routes, pAuthorities = []) { * @returns {*} */ function getI18nKey(path) { - const keys = path.split("/").filter((item) => !item.startsWith(":") && item != ""); - keys.push("name"); - return keys.join("."); + const keys = path.split('/').filter(item => !item.startsWith(':') && item != ''); + keys.push('name'); + return keys.join('.'); } /** @@ -227,13 +203,13 @@ function getI18nKey(path) { function loadGuards(guards, options) { const { beforeEach, afterEach } = guards; const { router } = options; - beforeEach.forEach((guard) => { - if (guard && typeof guard === "function") { + beforeEach.forEach(guard => { + if (guard && typeof guard === 'function') { router.beforeEach((to, from, next) => guard(to, from, next, options)); } }); - afterEach.forEach((guard) => { - if (guard && typeof guard === "function") { + afterEach.forEach(guard => { + if (guard && typeof guard === 'function') { router.afterEach((to, from) => guard(to, from, options)); } }); -- GitLab