vue-router动态路由加载会遇到一些问题,最严重的问题是刷新动态路由页面导致404,网上查了不少资料,都有点问题,解决了一下,附代码及解决思路。

1、使用动态路由时需要一个全局变量,用来控制什么时候加载这个动态路由,我用的是vuex全局状态集管理,用他有个好处就是,刷新时路由信息会丢失,vuex状态也会丢失,所以根据他的状态来判断比较好,设置一个初始值 , 默认false,等动态路由加载完就把这个状态改成true.

2、在beforeEach 里面拦截处理逻辑。

3、动态路由判断时一定要注意,不能重复加载,否则会死循环。

4、刷新时最主要的代码是next 的时候把to 传进去,不然怎么弄在动态页面刷新也是空白或404,其他的记住不要死循环就行了。

核心代码如下:

let routerUpdate = function(to, from, next){
  let dynamicRouter = store.getters.getDynamicRouter;
  if(!dynamicRouter){// 更新路由
    router.addRoutes(dynamicRoutingList)
    router.options.routes.push(dynamicRoutingList)
    store.commit('SET_DYNAMIC_ROUTER',true);
    if(from.name==null){
      next(to)
    }else{
      next()
    }
  }else{
    console.log(dynamicRouter);
    next()
  }
}
router.beforeEach((to, from, next) => {  Vue.$vux.loading.show();
  let token = localStorage.getItem('token');
  if(!to.meta.noToken){
    if(!token){
      console.log('无登录信息')
      router.push({path:'/login'})
    }else {
      routerUpdate(to, from, next)
    }
  }else{
    if(!token){
      next();
    }else {
      routerUpdate(to, from, next)
    }
  }
});
router.afterEach(function (to) {  Vue.$vux.loading.hide();
});
Logo

前往低代码交流专区

更多推荐