快捷導航

vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解

更新時間：2023年11月16日 16:01:51 作者：二月如若微風

頁面刷新白屏其實是因為vuex引起的,由于刷新頁面vuex數(shù)據(jù)會丟失,這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解的相關(guān)資料,需要的朋友可以參考下

動態(tài)路由刷新出現(xiàn)空白頁：

原因：刷新頁面的時候動態(tài)路由會刷新掉，然后動態(tài)路由會重新加載，而匹配路由會在加載路由之前，所以會導致空白頁

router.beforeEach(async (to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN;//token
    let hasRoutes=store.state.hasRoutes; //默認是false，刷新頁面這個也是false
    let menuList=store.getters.GET_MENULIST; //后端返回的菜單列表
    if (token) {
        if(!hasRoutes){
            bindRoute(menuList);//添加動態(tài)路由
            store.commit("SET_ROUTES_STATE",true);
            }
        next();
    } else {
        if (whiteList.includes(to.path)) {
            next();
        } else {
            next('/login');
        }
    }
})
//添加動態(tài)路由
const bindRoute = (menuList) => {
    let newRoutes = router.options.routes;
    menuList.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                // 菜單轉(zhuǎn)成路由
                let route = menuToRoute(m, menu.name);
                if (route) {
                    newRoutes[0].children.push(route); // 添加到路由管理
                }
            })
        }
    })
    // 重新添加到路由
    newRoutes.forEach(route => {
        router.addRoute(route)
    })
}
// 菜單轉(zhuǎn)成路由
const menuToRoute = (menu, parentName) => {
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            parentName: parentName
        },
        children:[],
    }
    if (!menu.component) {
        route.component = ''
    } else {
        route.component = () => import('@/views/' + menu.component + '.vue')
    }
    return route
}

解決辦法：遞歸再調(diào)用beforEach，或者直接跳回首頁

在你加載路由的地方

遞歸調(diào)用：next({ …to, replace: true });（慎用，如果你的后臺管理table是帶標簽會有問題，沒有放對位置會死循環(huán)）

跳回首頁：next({path:‘/index’})附上解決的代碼：

router.beforeEach(async (to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN;
    let hasRoutes=store.state.hasRoutes;
    let menuList=store.getters.GET_MENULIST;
    if (token) {
        console.log(store.state.editabTabs)
        if(!hasRoutes){
            bindRoute(menuList);
            store.commit("SET_ROUTES_STATE",true);
            //next({ ...to, replace: true });//----------解決
            next({path:'/index'}); //----------解決
            }
        next();
    } else {
        if (whiteList.includes(to.path)) {
            next();
        } else {
            next('/login');
        }
    }
})
//添加動態(tài)路由
const bindRoute = (menuList) => {
    let newRoutes = router.options.routes;
    menuList.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                // 菜單轉(zhuǎn)成路由
                let route = menuToRoute(m, menu.name);
                if (route) {
                    newRoutes[0].children.push(route); // 添加到路由管理
                }
            })
        }
    })
    // 重新添加到路由
    newRoutes.forEach(route => {
        router.addRoute(route)
    })
}
// 菜單轉(zhuǎn)成路由
const menuToRoute = (menu, parentName) => {
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            parentName: parentName
        },
        children:[],
    }
    if (!menu.component) {
        route.component = ''
    } else {
        route.component = () => import('@/views/' + menu.component + '.vue')
    }
    return route
}