From 440f9bf5775cbd62b3327ca8c250c8b23f9b88c9 Mon Sep 17 00:00:00 2001 From: iczer <1126263215@qq.com> Date: Tue, 28 Jul 2020 23:17:00 +0800 Subject: [PATCH] chore: add configuration for async router; :star2: --- src/config/default/setting.config.js | 1 + src/main.js | 5 ++-- src/router/config.async.js | 16 +---------- src/router/config.js | 26 ++++++----------- src/router/index.js | 29 +++++++++++++++---- src/store/modules/setting.js | 3 ++ src/utils/i18n.js | 12 ++------ src/utils/routerUtil.js | 43 ++++++++++++++++------------ 8 files changed, 66 insertions(+), 69 deletions(-) diff --git a/src/config/default/setting.config.js b/src/config/default/setting.config.js index 64f381c..cec03c2 100644 --- a/src/config/default/setting.config.js +++ b/src/config/default/setting.config.js @@ -16,6 +16,7 @@ module.exports = { hideSetting: false, //隐藏设置抽屉，true:隐藏，false:不隐藏 systemName: 'Vue Antd Admin', //系统名称 copyright: '2018 ICZER 工作室出品', //copyright + asyncRoutes: true, //异步加载路由，true:开启，false:不开启 animate: { //动画设置 disabled: false, //禁用动画，true:禁用，false:启用 name: 'bounce', //动画效果，支持的动画效果可参考 ./animate.config.js diff --git a/src/main.js b/src/main.js index f426f1c..f1e9538 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ import Vue from 'vue' import App from './App.vue' -import router from './router' +import {initRouter} from './router' import './theme/index.less' import Antd from 'ant-design-vue' import Viser from 'viser-vue' @@ -11,7 +11,8 @@ import Plugins from '@/plugins' import {initI18n} from '@/utils/i18n' import bootstrap from '@/bootstrap' -const i18n = initI18n(router, 'CN', 'US') +const router = initRouter(store.state.setting.asyncRoutes) +const i18n = initI18n('CN', 'US') bootstrap({router, store, i18n}) Vue.config.productionTip = false diff --git a/src/router/config.async.js b/src/router/config.async.js index 4fc21b0..654a293 100644 --- a/src/router/config.async.js +++ b/src/router/config.async.js @@ -21,18 +21,4 @@ const options = { routes: parseRoutes(routesConfig, routerMap) } -// 不需要登录拦截的路由配置 -const loginIgnore = { - names: ['404'], //根据路由名称匹配 - paths: ['/login'], //根据路由fullPath匹配 - /** - * 判断路由是否包含在该配置中 - * @param route vue-router 的 route 对象 - * @returns {boolean} - */ - includes(route) { - return this.names.includes(route.name) || this.paths.includes(route.path) - } -} - -export {options, loginIgnore} +export default options diff --git a/src/router/config.js b/src/router/config.js index d882e52..c34be38 100644 --- a/src/router/config.js +++ b/src/router/config.js @@ -1,4 +1,3 @@ -import Login from '@/pages/login/Login' import TabsView from '@/layouts/tabs/TabsView' import BlankView from '@/layouts/BlankView' import PageView from '@/layouts/PageView' @@ -9,13 +8,18 @@ const options = { { path: '/login', name: '登录页', - component: Login + component: () => import('@/pages/login') }, { path: '*', name: '404', component: () => import('@/pages/exception/404'), }, + { + path: '/403', + name: '403', + component: () => import('@/pages/exception/403'), + }, { path: '/', name: '首页', @@ -24,7 +28,7 @@ const options = { children: [ { path: 'demo', - name: '演示页0', + name: '演示页', meta: { icon: 'file-ppt' }, @@ -90,18 +94,4 @@ const options = { ] } -// 不需要登录拦截的路由配置 -const loginIgnore = { - names: ['404'], //根据路由名称匹配 - paths: ['/login'], //根据路由fullPath匹配 - /** - * 判断路由是否包含在该配置中 - * @param route vue-router 的 route 对象 - * @returns {boolean} - */ - includes(route) { - return this.names.includes(route.name) || this.paths.includes(route.path) - } -} - -export {options, loginIgnore} +export default options diff --git a/src/router/index.js b/src/router/index.js index 5a4a2a5..5a68ccc 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,10 +1,29 @@ import Vue from 'vue' import Router from 'vue-router' -// import {options, loginIgnore} from './config' //本地路由配置 -import {options, loginIgnore} from './config.async' //异步路由配置 Vue.use(Router) -const router = new Router({...options}) -export {loginIgnore} -export default router +// 不需要登录拦截的路由配置 +const loginIgnore = { + names: ['404'], //根据路由名称匹配 + paths: ['/login'], //根据路由fullPath匹配 + /** + * 判断路由是否包含在该配置中 + * @param route vue-router 的 route 对象 + * @returns {boolean} + */ + includes(route) { + return this.names.includes(route.name) || this.paths.includes(route.path) + } +} + +/** + * 初始化路由实例 + * @param isAsync 是否异步路由模式 + * @returns {VueRouter} + */ +function initRouter(isAsync) { + const options = isAsync ? require('./config.async').default : require('./config').default + return new Router(options) +} +export {loginIgnore, initRouter} diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js index 04e26a9..9fd65b3 100644 --- a/src/store/modules/setting.js +++ b/src/store/modules/setting.js @@ -50,6 +50,9 @@ export default { }, setMenuData(state, menuData) { state.menuData = menuData + }, + setAsyncRoutes(state, asyncRoutes) { + state.asyncRoutes = asyncRoutes } } } diff --git a/src/utils/i18n.js b/src/utils/i18n.js index 62e2b8b..64e93a2 100644 --- a/src/utils/i18n.js +++ b/src/utils/i18n.js @@ -5,27 +5,19 @@ import './Objects' /** * 创建 i18n 配置 - * @param router 路由 * @param locale 本地化语言 * @param fallback 回退语言 * @returns {VueI18n} */ -function initI18n(router, locale, fallback) { +function initI18n(locale, fallback) { Vue.use(VueI18n) - const rootRoute = router.options.routes.find(item => item.path === '/') - const menuRoutes = rootRoute && rootRoute.children let i18nOptions = { locale, fallbackLocale: fallback, silentFallbackWarn: true, messages: routesI18n.messages } - const i18n = new VueI18n(i18nOptions) - if (menuRoutes) { - mergeI18nFromRoutes(i18n, menuRoutes) - } - - return i18n + return new VueI18n(i18nOptions) } /** diff --git a/src/utils/routerUtil.js b/src/utils/routerUtil.js index 256f456..e554e6e 100644 --- a/src/utils/routerUtil.js +++ b/src/utils/routerUtil.js @@ -50,22 +50,30 @@ function parseRoutes(routesConfig, routerMap) { * @param router 应用路由实例 * @param store 应用的 vuex.store 实例 * @param i18n 应用的 vue-i18n 实例 - * @param routesConfig + * @param routesConfig 路由配置 */ function loadRoutes({router, store, i18n}, routesConfig) { - // 如果 routesConfig 有值，则更新到本地，否则从本地获取 - if (routesConfig) { - store.commit('account/setRoutesConfig', routesConfig) - } else { - routesConfig = store.getters['account/routesConfig'] + const asyncRoutes = store.state.setting.asyncRoutes + // 如果是开启了异步路由，则加载异步路由配置 + if (asyncRoutes) { + // 如果 routesConfig 有值，则更新到本地，否则从本地获取 + if (routesConfig) { + store.commit('account/setRoutesConfig', routesConfig) + } else { + routesConfig = store.getters['account/routesConfig'] + } + if (routesConfig && routesConfig.length > 0) { + const routes = parseRoutes(routesConfig, routerMap) + const finalRoutes = mergeRoutes(router.options.routes, routes) + router.options = {...router.options, routes: finalRoutes} + router.matcher = new Router({...router.options, routes:[]}).matcher + router.addRoutes(finalRoutes) + } } - if (routesConfig && routesConfig.length > 0) { - const routes = parseRoutes(routesConfig, routerMap) - const finalRoutes = mergeRoutes(router.options.routes, routes) - router.options = {...router.options, routes: finalRoutes} - router.matcher = new Router({...router.options, routes:[]}).matcher - router.addRoutes(finalRoutes) - const menuRoutes = finalRoutes.find(item => item.path === '/').children + // 初始化Admin后台菜单数据 + const rootRoute = router.options.routes.find(item => item.path === '/') + const menuRoutes = rootRoute && rootRoute.children + if (menuRoutes) { mergeI18nFromRoutes(i18n, menuRoutes) store.commit('setting/setMenuData', menuRoutes) } @@ -78,12 +86,9 @@ function loadRoutes({router, store, i18n}, routesConfig) { * @returns {Route[]} */ function mergeRoutes(target, source) { - const targetMap = {} - const sourceMap = {} - target.forEach(item => targetMap[item.path] = item) - source.forEach(item => sourceMap[item.path] = item) - const routesMap = {...targetMap} - Object.keys(sourceMap).forEach(key => routesMap[key] = sourceMap[key]) + const routesMap = {} + target.forEach(item => routesMap[item.path] = item) + source.forEach(item => routesMap[item.path] = item) return Object.values(routesMap) }