解决动态路由刷新之后页面空白
/* 权限 */
import store from '@/store/index'
import router from '@/router';
// 动态路由
let routers = [{
path: 'welcome',
name: "welcome",
component: () => import('@/views/Welcome.vue')
}, {
path: 'people',
component:() => import('@/views/People.vue'),
name: "people"
}, {
path: 'vip',
component: () => import('@/views/Vip.vue'),
name: 'vip'
}, {
path: '404',
component: () => import('@/views/404.vue'),
name: '404'
}]
let done = true // 确保程序每次只动态添加一遍路由
router.beforeEach((to,from,next) => {
/* 判断用户是否登录 */
if(store.state.user.userInfo.token) {
// 登录之后判断路由不为空拿到用户的路由权限信息
console.log('from.path',from.path);
let routes = routers.filter(item => store.state.user.userInfo.routes.indexOf(item.name) != -1)
if(store.state.user.userInfo.routes.length !== 0 && done) {
routes.forEach(i => {
if(router.getRoutes().find(item => item.name == i.name) == undefined){
console.log('没有当前路由');
router.addRoute("mainCpntent",{
name:i.name,
path:i.path,
component:i.component
}) // 第一个参数位需要在那个name名称的下面添加二级路由 第二个参数位要添加的路由的配置
}
})
done =false
console.log(to);
next({ ...to, replace: true })
return
}
}
next()
})
export default router