解決動態路由刷新之后頁面空白

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