vue-addroute动态路由刷新之后页面空白

解决动态路由刷新之后页面空白

/* 权限 */
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