vue-router addrouters の更新によりページが空白になるか、404 の解決策が発生する

vue-router は、動的ルーティングをロードするときにいくつかの問題に遭遇します。最も深刻な問題は、動的ルーティング ページを更新すると 404 が発生することです。オンラインで多くの情報を確認し、いくつかの問題を見つけました。それらを解決し、コードと解決策のアイデアを添付しました。

1. 動的ルーティングを使用する場合、動的ルーティングをロードするタイミングを制御するグローバル変数が必要です。私は vuex グローバル状態セット管理を使用します。これを使用する利点は、更新時にルーティング情報が失われ、vuex の状態が失われることです。初期値（デフォルトは false）を設定し、動的ルートのロード後にこのステータスを true に変更します。

2. beforeEach の処理ロジックをインターセプトします。

3. 動的ルーティングを判断するときは、無限ループが発生するため、繰り返しロードできないように注意する必要があります。

4. 更新するときに最も重要なコードは、when next に渡すことです。そうでない場合、動的ページ更新は空白または 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) => {
    
      view.$vux.loading.show();
  let token = localStorage.getItem('token');
  if(!to.meta.noToken){
    if(!トークン){
      console.log('ログイン情報がありません')
      router.push({パス:'/ログイン'})
    }それ以外 {
      routerUpdate(to、from、next)
    }
  }それ以外{
    if(!トークン){
      次（）;
    }それ以外 {
      routerUpdate(to、from、next)
    }
  }
});
router.afterEach(function (to) {
  
    Vue.$vux.loading.hide();
});