useRouter
useRouter コンポーザブルは、ルーターインスタンスを返します。
pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>
テンプレート内でルーターインスタンスのみが必要な場合は、$router を使用してください。
pages/index.vue
<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' })
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" })
ナビゲーションガード
useRouter コンポーザブルは、ナビゲーションガードとして機能する afterEach、beforeEach、beforeResolve ヘルパーメソッドを提供します。
ただし、Nuxt には、ナビゲーションガードの実装を簡素化し、より優れた開発エクスペリエンスを提供する **ルートミドルウェア** の概念があります。
Promise とエラー処理
isReady(): ルーターが初期ナビゲーションを完了したときに解決される Promise を返します。onError: ナビゲーション中にキャッチされないエラーが発生するたびに呼び出されるエラーハンドラーを追加します。
ユニバーサルルーターインスタンス
pages/ フォルダーがない場合、useRouter は同様のヘルパーメソッドを備えたユニバーサルルーターインスタンスを返しますが、すべての機能がサポートされているわけではなく、vue-router とまったく同じように動作するわけではないことに注意してください。