import router from './index'; import NProgress from 'nprogress'; // 引入nprogress插件 import 'nprogress/nprogress.css'; // nprogress样式 import LayoutIndex from '../views/LayoutIndex/index'; // 嵌套路由视图组件 import ThreeIndex from '../views/LayoutIndex/components/ThreeIndex.vue'; // 三级路由 import { buttonPinia } from '../pinia/index'; import Vue from 'vue'; NProgress.configure({ showSpinner: false }) // 隐藏进度条 // 处理后端返回路由信息 转为组件对象 export const asyncFilterRouter = (asyncRouterList) => { const accessRouter = asyncRouterList.filter(item => { if(item.component) { if(item.component === 'Layout') { // 处理嵌套路由视图图组件 item.component = LayoutIndex; } else if(item.component === 'three') { item.component = ThreeIndex; } else { let url = item.component item.component = () => import(`@/views${url}`) } } if(item.children) { item.children = asyncFilterRouter(item.children) } return true }) return accessRouter } /** * 从本地存储中获取路由信息 * router.addRoutes() 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组 * 注册一个全局前置守卫 * 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中 */ const routerList = JSON.parse(sessionStorage.getItem("routerList")); export const addRouterInfo = (routerList) => { if(routerList) { let accessRouter = asyncFilterRouter(routerList); router.addRoutes(accessRouter); router.options.routes = accessRouter; } } addRouterInfo(routerList); router.beforeEach((to, from, next) => { NProgress.start(); if(routerList) { document.title = to.meta.title; next(); } else { next(); } }) router.beforeResolve((to, from, next) => { const pinia = buttonPinia(); if(to.meta.menuId) { Vue.prototype.$api.System.getUserMenuButtonInfo({ menuId: to.meta.menuId }).then(res => { if(res.statusMsg === 'ok') { let list = res.data.map(item => item.buttonHtmlId) pinia.changeMenuButtonInfo(list); } }) } next(); }) router.afterEach(() => { NProgress.done(); });