ivew 动态路由
闲言少叙,单刀直入
/build/env.js看到如下代码
export default "development";
当我们打包执行命令
npm run build
会发现
export default "production";
此时你会一脸迷糊对吧,
看下/libs/util.js中,疑窦顿消。。。
const ajaxUrl = env === 'development'
? '/src/data/'
: env === 'production'
? 'http://www.debug.com/api/'
: 'http://www.xxx.com/api/;
util.ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000,
withCredentials: true,
method: 'get'
});
下面看下动态路由如何写
util.js
import axios from 'axios'; import env from '../../build/env'; import lazyLoading from './lazyLoading.js'; import Cookies from 'js-cookie'; let util = { }; util.title = function (title) { title = title || 'XXX平台'; window.document.title = title; }; const ajaxUrl = env === 'development' ? '/src/data/' : env === 'production' ? '/src/data/' : '/src/data/'; util.ajax = axios.create({ baseURL: ajaxUrl, timeout: 30000, withCredentials: true, method: 'get' }); util.inOf = function (arr, targetArr) { let res = true; arr.map(item => { if (targetArr.indexOf(item) < 0) { res = false; } }); return res; }; util.oneOf = function (ele, targetArr) { if (targetArr.indexOf(ele) >= 0) { return true; } else { return false; } }; util.showThisRoute = function (itAccess, currentAccess) { if (typeof itAccess === 'object' && itAccess.isArray()) { return util.oneOf(currentAccess, itAccess); } else { return itAccess === currentAccess; } }; util.getRouterObjByName = function (routers, name) { let routerObj = {}; routers.forEach(item => { if (item.name === 'otherRouter') { item.children.forEach((child, i) => { if (child.name === name) { routerObj = item.children[i]; } }); } else { if (item.children.length === 1) { if (item.children[0].name === name) { routerObj = item.children[0]; } } else { item.children.forEach((child, i) => { if (child.name === name) { routerObj = item.children[i]; } }); } } }); return routerObj; }; util.handleTitle = function (vm, item) { return item.title; }; util.setCurrentPath = function (vm, name) { let title = ''; let isOtherRouter = false; vm.$store.state.app.routers.forEach(item => { if (item.children.length === 1) { if (item.children[0].name === name) { title = util.handleTitle(vm, item); if (item.name === 'otherRouter') { isOtherRouter = true; } } } else { item.children.forEach(child => { if (child.name === name) { title = util.handleTitle(vm, child); if (item.name === 'otherRouter') { isOtherRouter = true; } } }); } }); let currentPathArr = []; if (name === 'home_index') { currentPathArr = [ { title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')), path: '', name: 'home_index' } ]; } else if ((name.indexOf('_index') >= 0 || isOtherRouter) && name !== 'home_index') { currentPathArr = [ { title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')), path: '/home', name: 'home_index' }, { title: title, path: '', name: name } ]; } else { let currentPathObj = vm.$store.state.app.routers.filter(item => { if (item.children.length <= 1) { return item.children[0].name === name; } else { let i = 0; let childArr = item.children; let len = childArr.length; while (i < len) { if (childArr[i].name === name) { return true; } i++; } return false; } })[0]; if (currentPathObj.children.length <= 1 && currentPathObj.name === 'home') { currentPathArr = [ { title: '首页', path: '', name: 'home_index' } ]; } else if (currentPathObj.children.length <= 1 && currentPathObj.name !== 'home') { currentPathArr = [ { title: '首页', path: '/home', name: 'home_index' }, { title: currentPathObj.title, path: '', name: name } ]; } else { let childObj = currentPathObj.children.filter((child) => { return child.name === name; })[0]; currentPathArr = [ { title: '首页', path: '/home', name: 'home_index' }, { title: currentPathObj.title, path: '', name: currentPathObj.name }, { title: childObj.title, path: currentPathObj.path + '/' + childObj.path, name: name } ]; } } vm.$store.commit('setCurrentPath', currentPathArr); return currentPathArr; }; util.openNewPage = function (vm, name, argu, query) { if (vm.$store === undefined) { return; } let pageOpenedList = vm.$store.state.app.pageOpenedList; let openedPageLen = pageOpenedList.length; let i = 0; let tagHasOpened = false; while (i < openedPageLen) { if (name === pageOpenedList[i].name) { // 页面已经打开 vm.$store.commit('pageOpenedList', { index: i, argu: argu, query: query }); tagHasOpened = true; break; } i++; } if (!tagHasOpened) { let tag = vm.$store.state.app.tagsList.filter((item) => { if (item.children && item.children.length > 0) { return name === item.children[0].name; } else { return name === item.name; } }); tag = tag[0]; if (tag) { tag = tag.children && tag.children.length > 0 ? tag.children[0] : tag; if (argu) { tag.argu = argu; } if (query) { tag.query = query; } // console.log(tag); vm.$store.commit('increateTag', tag); } } vm.$store.commit('setCurrentPageName', name); }; util.toDefaultPage = function (routers, name, route, next) { let len = routers.length; let i = 0; let notHandle = true; while (i < len) { if (routers[i].name === name && routers[i].children && routers[i].redirect === undefined) { route.replace({ name: routers[i].children[0].name }); notHandle = false; next(); break; } i++; } if (notHandle) { next(); } }; util.fullscreenEvent = function (vm) { // 权限菜单过滤相关 vm.$store.commit('updateMenulist'); }; util.initRouter = function (vm) { const constRoutes = []; const otherRoutes = []; // 404路由需要和动态路由一起注入 const otherRouter = [{ path: '/*', name: 'error-404', meta: { title: '404-页面不存在' }, component: 'error-page/404' }]; // 模拟异步请求'menu.json' util.ajax('menu.json').then(res => { // console.log(res.data.msg); if (res.data.codeEnum !== 'FAIL') { var menuData = res.data; util.initRouterNode(constRoutes, menuData); util.initRouterNode(otherRoutes, otherRouter); // 添加主界面路由 vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0)); // 添加全局路由 vm.$store.commit('updateDefaultRouter', otherRoutes); // 刷新界面菜单 vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0)); let tagsList = []; vm.$store.state.app.routers.map((item) => { if (item.children.length <= 1) { tagsList.push(item.children[0]); } else { tagsList.push(...item.children); } }); vm.$store.commit('setTagsList', tagsList); } else { window.alert('账号已在其他地方登录,如非本人操作,请立即修改密码'); util.initRouterNode(otherRoutes, otherRouter); // 添加全局路由 vm.$store.commit('updateDefaultRouter', otherRoutes); Cookies.remove('user'); Cookies.remove('access'); localStorage.clear(); window.location.href = 'http://www.xxx.com/#/login'; } }); }; // 生成路由节点 util.initRouterNode = function (routers, data) { for (var item of data) { let menu = Object.assign({}, item); // menu.component = import(`@/views/${menu.component}.vue`); menu.component = lazyLoading(menu.component); if (item.children && item.children.length > 0) { menu.children = []; util.initRouterNode(menu.children, item.children); } let meta = {}; // 给页面添加标题 meta.permission = menu.permission ? menu.permission : null; meta.title = menu.title ? menu.title : null; menu.meta = meta; routers.push(menu); } }; export default util;
lazyLoading.js
export default (url) =>()=>import(`@/views/${url}.vue`)
main.js中需调用util.js我们写好的方法
mounted () { this.currentPageName = this.$route.name; this.$store.commit('initCachepage'); this.$store.commit('setOpenedList'); // 调用方法,动态生成路由 util.initRouter(this); },
created () { let tagsList = []; appRouter.map((item) => { if (item.children.length <= 1) { tagsList.push(item.children[0]); } else { tagsList.push(...item.children); } }); this.$store.commit('setTagsList', tagsList); }
打完收工。。。大牛勿喷,写的有点hack,记录下自己的心得,防止忘记