我修改了src/permission.js文件
`
import router from './router'
import store from './store'
import storage from 'store'
import NProgress from 'nprogress' // progress bar
import '@/components/NProgress/nprogress.less' // progress bar custom style
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { i18nRender } from '@/locales'
我修改了src/permission.js文件 ` import router from './router' import store from './store' import storage from 'store' import NProgress from 'nprogress' // progress bar import '@/components/NProgress/nprogress.less' // progress bar custom style import { setDocumentTitle, domTitle } from '@/utils/domUtil' import { ACCESS_TOKEN } from '@/store/mutation-types' import { i18nRender } from '@/locales'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const allowList = ['login', 'register', 'registerResult'] // no redirect allowList const loginRoutePath = '/user/login' const defaultRoutePath = '/dashboard/workplace'
router.beforeEach((to, from, next) => { NProgress.start() // start progress bar to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(
${i18nRender(to.meta.title)} - ${domTitle}
) / has token / if (storage.get(ACCESS_TOKEN)) { if (to.path === loginRoutePath) { next({ path: defaultRoutePath }) NProgress.done() } else { store.dispatch('GenerateRoutes', { groupKey: 'leftMenu' }).then(() => { next() }) } } else { if (allowList.includes(to.name)) { // 在免登录名单,直接进入 next() } else { next({ path: loginRoutePath, query: { redirect: to.fullPath } }) NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it } } })router.afterEach(() => { NProgress.done() // finish progress bar }) `
src/router/generator-routers.js文件 用来处理我们接口和官方的不同
export const generatorDynamicRouter = groupKey => { console.log(groupKey) return new Promise((resolve, reject) => { loginService .getCurrentUserNav(groupKey) .then(res => { console.log('generatorDynamicRouter response:', res) // const { result } = res // console.log(result, 123) const result = [] const leftMenuData = res.data.data leftMenuData.forEach(item => { result.push({ component: item.property.component, id: item.id, meta: { show: item.property.show, title: item.title, icon: item.icon }, name: item.actionKey, parentId: 0 }) }) const menuNav = [] const childrenNav = [] // 后端数据, 根级树数组, 根级 PID listToTree(result, childrenNav, 0) rootRouter.children = childrenNav console.log(rootRouter) menuNav.push(rootRouter) console.log('menuNav', menuNav) const routers = generator(menuNav) routers.push(notFoundRouter) console.log('routers', routers) resolve(routers) }) .catch(err => { reject(err) }) }) }
也根据官网进行修改了src/router/index.js ` // import Vue from 'vue' // import Router from 'vue-router' // import { constantRouterMap } from '@/config/router.config'// // hack router push callback // const originalPush = Router.prototype.push // Router.prototype.push = function push (location, onResolve, onReject) { // if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) // return originalPush.call(this, location).catch(err => err) // }
// Vue.use(Router)
// export default new Router({ // mode: 'history', // routes: constantRouterMap // })
import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap, asyncRouterMap } from '@/config/router.config'
Vue.use(Router)
export default new Router({ mode: 'history', routes: constantRouterMap.concat(asyncRouterMap) })![image](https://user-images.githubusercontent.com/55682918/138052422-2b7adf46-88d6-40ec-864e-b4cdac1e8fe1.png)
以及BasicLayout.vue
import { asyncRouterMap } from '@/config/router.config.js' const routes = asyncRouterMap.find((item) => item.path === '/') // const routes = this.mainMenu.find(item => item.path === '/') ` 但是浏览器依然不能加载路由和菜单 我也查了路由表显示路由是添加进去了 但是页面依然进入了404页面![image](https://user-images.githubusercontent.com/55682918/138052523-527e40cc-6215-4058-94a8-6c057618051d.png)