const router = useRouter()

テンプレート内でのみルーターインスタンスが必要な場合は、$router を使用してください:

<template>
  <button @click="$router.back()">Back</button>
</template>

pages/ ディレクトリがある場合、useRouter の動作は vue-router によって提供されるものと同じです。

基本的な操作

• addRoute(): 新しいルートをルーターインスタンスに追加します。parentName を指定すると、既存のルートの子として新しいルートを追加できます。
• removeRoute(): 名前で既存のルートを削除します。
• getRoutes(): すべてのルートレコードの完全なリストを取得します。
• hasRoute(): 指定された名前のルートが存在するかどうかを確認します。
• resolve(): ルートの場所の正規化されたバージョンを返します。また、既存のベースを含む href プロパティも含まれます。

const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })

History API に基づく

• back(): 可能であれば履歴を戻ります。router.go(-1) と同じです。
• forward(): 可能であれば履歴を進みます。router.go(1) と同じです。
• go(): router.back() や router.forward() で課される階層的な制限なしに履歴を前後に移動します。
• push(): 履歴スタックにエントリを追加してプログラム的に新しい URL にナビゲートします。navigateTo の使用を推奨します。
• replace(): ルート履歴スタックの現在のエントリを置き換えてプログラム的に新しい URL にナビゲートします。navigateTo の使用を推奨します。

const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: "/home" })
router.replace({ hash: "#bio" })

ナビゲーションガード

useRouter コンポーザブルは、ナビゲーションガードとして機能する afterEach、beforeEach、beforeResolve のヘルパーメソッドを提供します。

しかし、Nuxt にはナビゲーションガードの実装を簡素化し、より良い開発者体験を提供する ルートミドルウェア の概念があります。

Promise とエラーハンドリング

• isReady(): ルーターが初期ナビゲーションを完了したときに解決される Promise を返します。
• onError: ナビゲーション中にキャッチされないエラーが発生するたびに呼び出されるエラーハンドラーを追加します。

ユニバーサルルーターインスタンス

pages/ フォルダがない場合、useRouter は類似のヘルパーメソッドを持つユニバーサルルーターインスタンスを返しますが、すべての機能がサポートされているわけではなく、vue-router と同じように動作するとは限りません。