useRouter
useRouter composable 返回 router 實例。
pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>
如果您只需要模板中的 router 實例，請使用 $router
pages/index.vue
<template>
<button @click="$router.back()">Back</button>
</template>
如果您有一個 pages/ 目錄，useRouter 的行為與 vue-router 提供的行為相同。
基本操作
addRoute()：將新的路由新增到 router 實例。可以提供parentName以將新路由新增為現有路由的子路由。removeRoute()：依名稱移除現有路由。getRoutes()：取得所有路由記錄的完整清單。hasRoute()：檢查是否有名稱給定的路由。resolve()：傳回路由位置的正規化版本。也包含一個href屬性，其中包含任何現有的 base。
範例
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 元件和 composable 中很有用。基於 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 composable 提供 afterEach、beforeEach 和 beforeResolve 輔助方法，這些方法充當導航守衛。
但是，Nuxt 有一個路由中介軟體的概念，它可以簡化導航守衛的實作，並提供更好的開發人員體驗。
Promise 和錯誤處理
通用 Router 實例
如果您沒有 pages/ 資料夾，則 useRouter 將傳回一個通用的 router 實例，其中包含類似的輔助方法，但請注意，並非所有功能都可能受到支援，或者行為方式與 vue-router 完全相同。