目前页面访问不影响,我猜测是路由跳转的时候,还没有注入响应的路由,然后第二次访问时已经生成好路由了。
虽然可以正常访问页面,但这个报错看着很不舒服,有没有人知道咋解决的
//路由完全注册标识
let routeFlag = false
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
if (hasToken) {
if (routeFlag) {
next()
} else {
// 注册动态路由
store
.dispatch('userModule/ASYNC_ROUTER')
.then(() => {
genRouteConfig().then(() => {
routeFlag = true
next({ ...to, replace: true })
})
})
.catch(() => {
localStorage.removeItem('token')
next(`/login?redirect=${to.path}`)
})
}
}
//动态生成路由
const genRouteConfig = () => {
const getMenus: newMenustype = store.getters['userModule/getMenus']
return new Promise((resolve, reject) => {
router.addRoute({
path: '/:catchAll(.*)',
redirect: '/404',
name: 'NotFound'
})
for (let key in getMenus) {
let menusObj = getMenus[key]
const routerObj: RouteRecordRaw = {
path: '/' + menusObj.name,
name: menusObj.name,
component: () => import('@/views/homepage/homepage.vue'),
children: []
}
if (menusObj.children) {
routerObj.redirect = `/${menusObj.name}/${menusObj.children[0].name}`
for (let i = 0; i < menusObj.children.length; i++) {
let menuName: string = menusObj.children[i].name
if (routerObj.children) {
routerObj.children.push({
path: menuName,
name: menuName,
component: modules[`./views/${menusObj.name}/${menuName}.vue`]
})
}
}
}
router.addRoute(routerObj)
}
resolve(true)
})
}