vue-router addrouters 刷新导致页面空白或404 解决方案

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();
});