vue-ルーティングの学習

ルートの紹介
Vue RouterはVueです.js公式のルーティングマネージャ.Vueとjsのコア深度統合により、単一ページアプリケーションの構築が容易になります.以下の機能があります.
ネストされたルーティング/グラフのモジュール化、コンポーネントベースのルーティング構成ルーティングパラメータ、クエリー、ワイルドカードはVueベースである.js遷移システムのビュー遷移効果細粒度のナビゲーション制御自動アクティブCSS class付きリンクHTML 5履歴モードまたはhashモード、IE 9でカスタムスクロールバー動作を自動的に降格
ネストされたルーティング
実際の生活における応用インタフェースは,通常,多層ネストされたコンポーネントを組み合わせたものである.vue-routerを用いて,ネストされたルーティング構成を用いると,この関係を簡単に表現できる.
宣言式のナビゲーション##プログラミング式のナビゲーション
aラベルの作成を使用してナビゲーションリンクを定義するだけでなく、routerのインスタンスメソッドを使用してコードを記述することで実現することもできます.router.push(location, onComplete?, onAbort?) 注意:Vueインスタンスの内部では、r o u t e rを介してルーティングインスタンスにアクセスできます.したがって、t h i sを呼び出すことができます.routerはルーティングインスタンスにアクセスします.これを呼び出すことができますrouterはルーティングインスタンスにアクセスします.これを呼び出すことができますrouter.push.
ナビゲーションガード
vue-routerが提供するナビゲーションガードは、主にジャンプまたはキャンセルによってナビゲーションをガードするために使用されます.ルーティング・ナビゲーション・プロセスに植え込む機会は、グローバル、単一のルーティングがユニーク、またはコンポーネント・レベルです.
パラメータまたはクエリーの変更は、ナビゲーション・ガードの開始/終了をトリガーしないことを覚えておいてください.$routeオブジェクトを観察することで、これらの変化に対処したり、beforeRouteUpdateのコンポーネント内ガードを使用したりすることができます.routerを使ってもいいです.beforeEachは、グローバル・フロント・ガードを登録します.

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

ナビゲーションがトリガーされると、グローバル・フロント・ガードが作成順に呼び出されます.ガードは非同期解析実行であり、ナビゲーションはすべてのガードresolveが完了するまで待機中です.各ガードメソッドは、3つのパラメータ:to:Route:アクセスするターゲットルーティングオブジェクトfrom:Route:現在のナビゲーションが離れるルーティングnext:Function:resolveというフックを呼び出す必要があります.実行効果はnextメソッドの呼び出しパラメータに依存します.next():パイプ内の次のフックを行います.すべてのフックが実行されると、ナビゲーションの状態はconfirmed(確認された)になります.next(false):現在のナビゲーションを中断します.ブラウザのURLが変更された場合(ユーザ手動またはブラウザ後退ボタンの可能性があります)、URLアドレスはfromルーティングに対応するアドレスにリセットされます.next('/')またはnext({path:'/'}):異なるアドレスにジャンプします.現在のナビゲーションが中断され、新しいナビゲーションが行われます.任意の位置のオブジェクトをnextに渡すことができ、replace:true、name:‘home’などのオプションとrouter-linkで使用するto propまたはrouterを設定することができます.pushのオプション.next(error):(2.4.0+)nextに入力パラメータがErrorインスタンスである場合、ナビゲーションは終了する、エラーはrouterに伝達される.onError()に登録されたコールバック.nextメソッドを呼び出す必要があることを確認します.そうしないと、フックはresolvedされません.参考vue公式サイト:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%ABその他の再補充