useRouter

ソース
useRouter コンポーザブルは、ルーターインスタンスを返します。
app/pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>

テンプレート内でのみルーターインスタンスが必要な場合は、$router を使用します。

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

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

Router インターフェースに関する 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' })
router.addRoute() はルートの詳細をルートの配列に追加し、Nuxt プラグインを構築する際に役立ちますが、一方、router.push() はすぐに新しいナビゲーションをトリガーし、ページ、Vue コンポーネント、コンポーザブルで役立ちます。

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' })
ブラウザの History API の詳細については、こちらをお読みください。

ナビゲーションガード

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

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

詳細については、Docs > 4 X > Guide > Directory Structure > App > Middleware を参照してください。

Promise とエラー処理

  • isReady(): ルーターが初期ナビゲーションを完了したときに解決される Promise を返します。
  • onError: ナビゲーション中に捕捉されなかったエラーが発生するたびに呼び出されるエラーハンドラーを追加します。
Vue Router ドキュメントで詳細をご確認ください。

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

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