提供一种vue3+VueRouter4动态路由在刷新页面时404问题的解决方案

先谈一下什么是动态路由，它指的是路由信息是并不是硬编码在代码里面，而是通过后台接口动态生成路由信息

那动态的路由为什么会出现404呢？

上图的url是后台生成的， 在刷新此页面的时候如果菜单还没来得及生成路由信息，那么导航就会出现404，即找不到路由信息。事实上404肯定会发生，不管后台接口如何的快速也没办法比前端代码的执行速度快

那要怎么处理呢？ 下面提供一下个人的思路

首先404是肯定会发生页面跳转是什么问题， 那么是否可以在发生的时候判断系统是否已经初始化， 代码如下：

/**
 * 增加404路由
 * 如果系统菜单还没有加载完成则先跳回首页, 等待菜单加载完成之后在跳转回去
 */
router.addRoute({path:'/:chapters+', name: '404', component: NotFound,
    beforeEnter({path}, from, next) {
        let init = store.getters["sys/init"];
        if(!init) {
            init = computed(() => store.getters["sys/init"]);
            watch(init, (val) => {
                let urlMenuMaps = store.getters['sys/urlMenuMaps'];
                let menu = urlMenuMaps[path];
                if(menu) { // 当前url对应的菜单, 如果存在激活
                    store.commit('sys/putMenuToTaskBars', menu)
                    store.commit('sys/switchActiveMenuTo', path)
                }
                router.push(path).then()
            });
            next({path: '/'})
        } else {
            next();
        }
    }
})

首先在store存储一个菜单是否加载完成的状态(init)，在发生404的时候判断， 如果系统未初始化则先跳转到首页进行页面初始化并且监听init的变化，如果初始化完成后再导航回去。

还有一种方式：就是刷新页面的时候再初始化菜单的代码块里面使用同步页面跳转是什么问题，等待菜单从后台返回初始化之后再往下执行(没有试过)

总结：以上是一个比较粗的处理方式， 如果同行们有更好的处理方式，欢迎评论区指教哈