Vue.jsの$routerを説明する

Vue.js

Vue.js 

説明

Vue.jsの$routerは、ルーティングナビゲーションのためのインスタンスオブジェクトです。これはVue Routerが提供するグローバルなルーターオブジェクトであり、Vueアプリケーション内でのルーティングナビゲーション操作に使用されます。

$routerオブジェクトには、さまざまな便利なメソッドやプロパティがあり、異なるコンポーネント間でのルート遷移やナビゲーションガードなどの操作に使用できます。

以下に、よく使用される$routerのメソッドとプロパティをいくつか示します:

  1. $router.push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): 新しいルートを履歴に追加して異なるルートにナビゲートします。locationパラメータには、文字列のパスまたはディスクリプタオブジェクトを渡すことができます。オプションとして完了コールバック関数や中止エラーハンドラも指定できます。
  2. $router.replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): 現在のルートを新しいルートで置き換えますが、履歴には残りません。
  3. $router.go(n: number): ブラウザの履歴をnステップ進めたり戻ったりします。nは正数(進む)または負数(戻る)を指定できます。
  4. $router.back(): 1ステップ戻る操作であり、$router.go(-1)と同等です。
  5. $router.forward(): 1ステップ進む操作であり、$router.go(1)と同等です。
  6. $router.currentRoute: 現在のアクティブなルートの情報オブジェクトです。$router.currentRoute.path$router.currentRoute.paramsなどのプロパティにアクセスすることで、現在のルートの情報を取得できます。
  7. $router.beforeEach((to: Route, from: Route, next: Function) => {}): グローバルな前置ガードであり、ナビゲーションがトリガーされる前に呼び出されます。このガード内で権限チェックやリダイレクトなどの操作を行うことができます。

コメント

タイトルとURLをコピーしました