vueRouter 动态添加路由刷新页面后空白

前段时间在使用vuerouter时遇到的一个坑,菜是原罪,各种搜索,记录一番.

一定要声明一个变量来判断是否是页面刷新导致的重新进入到全局前置守卫了. 直接上代码

--main.js--

let isRefresh = false;   //判断是否是刷新页面进入的守卫
//因为要做路由跳转是否合法的判断,所以写了个方法
const beforeRouter = (to, from, next) => {   
	loading.open();    //众所周知,需要加载一下...
        if (store.getters.getAccessedRouters.length == 0) { //vuex中动态路由是否为空
                store.dispatch('GENERATE_ROUTES').then(() => {  //动态添加路由
                        const isDetailsPage = store.getters.getIsDetails;
                        const pageNum = store.getters.getApplyPage?.page;
                        isRefresh = true;    //圈起来 要考
                        //根据配置获取要跳转的页面,如果一直跳指定页面,可以写死
                        const homeRouterPath = personaliseConfig.GET_HOME_PATH(
                                isDetailsPage,
                                pageNum
                        );
                        next(homeRouterPath);
                });
        } else if (!isRefresh) {  //页面刷新进入
                store.dispatch('GENERATE_ROUTES').then(() => {  //刷新后vuex中数据会丢失,重新加入
                        isRefresh = true;  //圈起来 重点
                        next({ ...to, replace: true }); //hack写法，保证路由已经添加成功
                });
        } else {
                next();   //页面加了动态路由了,也不是刷新页面,正常点击按钮触发的操作,直接放行.
        }
	
};
//判断用户跳转是否合法
router.beforeEach((to, from, next) => {
	document.title = to.meta.title ? to.meta.title : icity.ICITY_TITLE_NAME;
	if (from.path !== '/') {
		if (store.getters.getIsLicit) {
			beforeRouter(to, from, next);
		} else {
			alert('非法操作!!!');
			next(false);
		}
	} else {
		beforeRouter(to, from, next);
	}
});
//记得吧转圈圈的关了
router.afterEach(() => {
	loading.close();
});

vuex中的GENERATE_ROUTES 方法

--index.js--

//权限管理store
import router,{constantRoutes,lastRouters} from '@/router/index.js';
import config from '@/config/personalise/index.js';

//动态添加路由与子路由
function dyAddRoute(route) {
    if (route.path==null||route.path=='') {
        return;
    }
    if(route.name==null||route.name==""){
        return;
    }
    if (route.component==null||route.component=='') {
        return;
    }
    router.addRoute(route);
    return route;
}
function dyAddRouteChildren(route) {
    if (route.path==null||route.path=='') {
        return;
    }
    if(route.name==null||route.name==""){
        return;
    }
    if (route.component==null||route.component=='') {
        return;
    }
    if(route.meta?.parentName==null||route.meta?.parentName==""){
        return;
    }
    router.addRoute(route.meta.parentName,route);
    return route;
}

const permission = {
    state: {
        permissionRouters: [],/**所有权限路由*/
        accessedRouters:[],//允许访问的路由，符合校验的路由
    },
    mutations: {
        SET_PERMISSION_ROUTERS(state,routes){
            state.permissionRouters=routes
        },
        SET_ACCESSED_ROUTERS(state,routers){
            state.accessedRouters=routers
        }
    },
    actions: {
        GENERATE_ROUTES({commit,getters}){   //这个就是main.js中经常dispatch的方法
            const page = getters.getApplyPage.page;
            const dyRouterConfig = config.GET_APPLY_CONFIG(page);
            const PARENT_ROUTERS = dyRouterConfig.PARENT_ROUTERS;
            const CHILDREN_ROUTERS = dyRouterConfig.CHILDREN_ROUTERS;
            const addedRouters = PARENT_ROUTERS.map(route=>{
                return dyAddRoute(route);
            });
            const addedRoutes_children = CHILDREN_ROUTERS.map(route=>{
                return dyAddRouteChildren(route);
            });
            router.addRoute(lastRouters);//404
            let needAddRouters = [...addedRouters,...addedRoutes_children,lastRouters];
            needAddRouters = needAddRouters.filter(obj => obj)//过滤去除不符合条件路由
            /*  动态添加路由,之后存store */
            commit("SET_ACCESSED_ROUTERS",needAddRouters);
            commit("SET_PERMISSION_ROUTERS",[...constantRoutes,...needAddRouters]);
        },
    }
};

export default permission;