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