Vueでは、グローバルルーティングフックを利用してurlに共通パラメータを一括追加する例

あるとき、私たちは今urlがm.taoyuewenhu.com/啣/葃/私たちはユーザーがルートをジャンプするたびに、abcというパラメータがあるかどうかを監視する必要があります。もしあれば、バックエンドが要求されたら、私たちはこのパラメータをurlに持ち歩きます。
このパラメータを「共通パラメータ」と呼びます。
じゃ、どうすればいいですか？vueには多くの部品があります。各コンポーネントに全部書くと面倒くさいです。この時、グローバルルーティングのフックが登場しました。それぞれです。
router.beforeEachグローバルナビゲーションフロントガード経路のジャンプ前に実行します。
router.beforeResoliveグローバルナビゲーション解析ガードvue 2.5にナビゲーションが追加されたことが確認される前に、同時にすべてのコンポーネント内でガードと非同期ルートコンポーネントが解析された後、解析ガードが呼び出されます。
router.afterEachグローバルナビゲーションの後に守備ルートを設定してジャンプした後に実行します。
私達が今回使ったのはフロントガードです。最初はバックガードを使いました。バグが発生したので、本人の技術が未熟かもしれません。後はフロントガードに変えました。
コードは以下の通りです

router.beforeEach((to, from, next) => {
 if (to.query.abc) {
  next();
  return;
 };
 if (from.query.abc) {
  let toQuery = JSON.parse(JSON.stringify(to.query));
  toQuery.abc = from.query.abc;
  next({
   path: to.path,
   query: toQuery
  })
 } else {
  next()
 }
 
 });

ここで説明します。フロントガードは必ずnext方法を実行します。実行しないと、ルートはジャンプしません。ルートがジャンプする時、私達がfromとtoを出力したら、彼らはそれぞれ前のルートと今のルートを代表します。もし私達がaからbに移動したいならば。つまり、ジャンプする時に、私達はすぐにbルートの住所を取得します。そして、この時bルートにabcというパラメータがあるかどうかを判断します。あったら、直接にジャンプして、next方法で実行します。そして、return;もしないならば、aのこのurlはabcのこのパラメーターがあるならば、私達はこのパラメーターをbのurlの上に置きます。そしてnextメソッドは実行します。このパラメータを携帯すればいいです。最後に、aがこのパラメータを持っていないなら、直接next方法で実行します。つまり、ルートは直接にジャンプして、ブロックはしません。
もう一つ注意したいのは初心者です。初心者がルーティングフックを使うと死のサイクルに遭遇しやすいです。ルーティングフックの実行メカニズムをよく見てください。死のサイクルに遭遇することはありません。時間があれば、この問題を教えてください。
以上の本はVueの中で全体のルートのフックを利用してurlに共通のパラメーターを追加しました。その例は小編纂で皆さんに共有した内容の全部です。参考にしてほしいです。どうぞよろしくお願いします。