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