vue动态路由来生成系统菜单（二）解决刷新空白的问题

╰半橙微兮° 2022-03-07 02:40 1640阅读 0赞

由于子路由都是动态追加的，当界面刷新的时候，其实我们路由里面并没有该子界面的配置，所以就是404咯，也就是空白咯

在页面刷新时候，在router.beforeEach里面去判断，如果是动态路由而且是第一次加载，则动态追加该路由，再进行界面的跳转。

核心代码如下：

var dynamicRouter=null//用来获取后台拿到的路由 
    var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符
    //如果开始跳转
    router.beforeEach(function (to, from, next) {
      // let routerCache=
     let lastUrl=getLastUrl(window.location.href,'/');
     let routerUrls=StorageUtils.getSessionItem("routerUrls");
     //如果GoingUtils.templateObj["jumpLoadFlag"]为null 则表示是界面刷新
     if(AssertUtils.isNotEmpty(routerUrls)&&!AssertUtils.isNotNull(GoingUtils.templateObj["jumpLoadFlag"])){
       if(!dynamicRouter){
         let routerUrlsAry=routerUrls.split(';');
         //如果当前连接在url中存在 则表示该跳转是需要动态加载的
         if(ArrayUtils.aryContains(routerUrlsAry,lastUrl)){
           dynamicRouter=DynamicRouterUtils.getRouterByUrl(lastUrl,UnitTabSetHomePage,router);
           next({ ...to, replace: true })
         }
       } else {
         next();
       }
     }
      //如果是配置了缓存路径的 则进行缓存 如果没有配置缓存则直接跳转
      if(routerCache.includes(to.name)||routerCache.includes(to.path)){
        to.meta.keepAlive = true;
      }else{
        to.meta.keepAlive = false;
      }
      //显示loading提醒
      store.commit('updateLoadingStatus', {isLoading: true});
      //如果是进入到login界面 相应先查询登录配置信息
    
      if (to.name === "login"||to.name==='loginUrl') {
        if (!store.state.vux.loginInfo) {
          //加载当前用户的登录界面设计信息
          store.dispatch($A('loadCurGroupLoginDes', "LoginStore"), {
            backFun: function () {
              store.commit('updateLoginState', {});
              next()
            }
          });
        } else {
          next()
        }
      } else {
        next();
      }
    })

到此就ok了 ，完成了路由的动态追加，完成了子路由下界面刷新找不到的问题。

当然我项目代码写的比较复杂啊，因为我项目采用的是tabset方式来打开子路由界面，所以还有许多其他不相干的状态和缓存数据。

发表评论取消回复

表情：

评论列表（有 0 条评论，1640人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue路由守卫，动态路由刷新白屏

也就是说此时addRoutes()已经完成啦，找到对应的路由之后，接下来将执行前往对应路由的beforeEach((to, from, next) ，因此需要用代码来判断...

朱雀/ 2024年04月20日 22:12/ 0 赞/ 89 阅读

相关 Vue2中动态路由添加后刷新页面呈现空白的bug

问题描述：在开发一个多用户后台系统时，需要将角色对应的菜单信息使用动态路由的方式添加到前端的router中，但是每当进入动态生成的路由时，只要刷新页面，就会显示空白，甚

痛定思痛。/ 2024年03月22日 16:50/ 0 赞/ 104 阅读

相关 vue-router动态路由刷新页面报404问题

请注意：404 page must be placed at the end !!! 404页面一定要放在路由的最后面，否则就会引起出错，包括动态添加路由的时候，也要放在最后

蔚落/ 2023年10月04日 18:58/ 0 赞/ 11 阅读

相关 vue动态路由来生成系统菜单解决刷新空白的问题

由于子路由都是动态追加的，当界面刷新的时候，其实我们路由里面并没有该子界面的配置，所以就是空白了在页面刷新时候，在router.beforeEach里面去判断，如果是动态路

冷不防/ 2023年06月27日 03:08/ 0 赞/ 5 阅读

相关 Windows系统 Postman打开之后空白却可以显示菜单问题解决

问题描述： Postman打开之后空白，却可以显示菜单，卸载重装也没用。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

末蓝、/ 2023年01月13日 10:45/ 0 赞/ 318 阅读

相关 vue+Ant design后台系统左侧菜单动态生成

1、Menu 入门一般先来个导航栏，咱用Antd的Menu组件官方会给你一组写好的死数据的实例，但是在项目中我们一般写成动态。 vue中写动态数据，方便的亚批，不仅

﹏ヽ暗。殇╰゛Y/ 2022年12月22日 09:57/ 0 赞/ 351 阅读

相关 vue 路由跳转页面不刷新问题解决

看到浏览器中地址在变。页面却一直更新不动。尝试很多方法。在App.vue中 <router-view>增加标识key无效的。可以往下面看 ![watermark_type_Z

今天药忘吃喽~/ 2022年12月05日 12:25/ 0 赞/ 604 阅读

相关 vue动态路由来生成系统菜单（一）

先说下功能吧，就是菜单通过动态路由进行渲染出来，而不是路由配置写死来实现。虽然网上已经有各种帖子来介绍，但我还是折腾了快2天才搞定。逻辑非常简单，思路也简单就是从数据库查下路由

亦凉/ 2022年03月08日 16:22/ 0 赞/ 251 阅读

相关 vue动态路由来生成系统菜单（二）解决刷新空白的问题

由于子路由都是动态追加的，当界面刷新的时候，其实我们路由里面并没有该子界面的配置，所以就是404咯，也就是空白咯在页面刷新时候，在router.beforeEach里面去判

╰半橙微兮°/ 2022年03月07日 02:40/ 0 赞/ 1641 阅读

相关 vue-cli3部署后刷新空白解决方案

今天同学有个vue项目部署上线上后，刷新页面就会变空白页，因为项目是vue-cli3的比较新，我以前从来没遇到过部署后刷新页面空白的情况，于是我把他的项目试着在本地先模拟部署一

电玩女神/ 2022年01月16日 01:23/ 0 赞/ 829 阅读