坑一 添加route后马上跳转可能出现白屏情况
原因分析:
还未成功添加就next()
跳转,找不到组件
解决办法:
使用next()
传参,在路由守卫beforeEach
中持续循环,知道确认已经添加成功,代码如下
router.beforeEach((to, from, next) => {
if (store.getters.roles.length === 0) {
store.dispatch('GenerateRoutes').then(accessRoutes => {
router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true })
})
} else {
next()
}
})
next()传参的作用是继续还会走beforeEach
而不是直接进入某个路由
beforeEach((to, from, next) => {
next('/logon')
}
这行代码并不是直接进入 /logon
而是会一直循环在这里,知道遇到`next()`
正确代码
beforeEach((to, from, next) => {
if(to.path === '/home') {
next('/logon')
} else {
// 如果要去的地方不是 /home , 就放行
next()
}
}
坑二 找不到component
而是组件component的引入,在服务器传递回来的组件是地址是字符串需要获取对应的组件
// 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false) {
return asyncRouterMap.filter(route => {
if (route.component) {
// Layout ParentView 组件特殊处理
if (route.component === 'Layout') {
route.component = Layout
} else if (route.component === 'ParentView') {
route.component = ParentView
} else if (route.component === 'InnerLink') {
route.component = InnerLink
} else {
route.component = loadView(route.component)
}
}
if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type)
} else {
delete route['children']
delete route['redirect']
}
return true
})
}
const loadView = (view) => {
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
} else {
// 使用 import 实现生产环境的路由懒加载
return () => import(`@/views/${view}`)
}
}
标签:Vue,beforeEach,addRoutes,component,next,children,菜单,else,route
From: https://www.cnblogs.com/EQ1024/p/17080797.html