快捷導(dǎo)航

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

更新時(shí)間：2023年11月16日 16:01:51 作者：二月如若微風(fēng)

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

動(dòng)態(tài)路由刷新出現(xiàn)空白頁(yè)：

原因：刷新頁(yè)面的時(shí)候動(dòng)態(tài)路由會(huì)刷新掉，然后動(dòng)態(tài)路由會(huì)重新加載，而匹配路由會(huì)在加載路由之前，所以會(huì)導(dǎo)致空白頁(yè)

router.beforeEach(async (to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN;//token
    let hasRoutes=store.state.hasRoutes; //默認(rèn)是false，刷新頁(yè)面這個(gè)也是false
    let menuList=store.getters.GET_MENULIST; //后端返回的菜單列表
    if (token) {
        if(!hasRoutes){
            bindRoute(menuList);//添加動(dòng)態(tài)路由
            store.commit("SET_ROUTES_STATE",true);
            }
        next();
    } else {
        if (whiteList.includes(to.path)) {
            next();
        } else {
            next('/login');
        }
    }
})
//添加動(dòng)態(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，或者直接跳回首頁(yè)

在你加載路由的地方

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

跳回首頁(yè)：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');
        }
    }
})
//添加動(dòng)態(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
}

總結(jié)

到此這篇關(guān)于vue3動(dòng)態(tài)路由刷新出現(xiàn)空白頁(yè)的原因與最優(yōu)解的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)路由刷新空白頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: