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屬性，其中包含任何現有的基本路徑。
範例
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 和錯誤處理
通用路由器實例
如果你沒有 pages/ 資料夾，則 useRouter 會回傳一個具有類似輔助方法的通用路由器實例，但請注意，並非所有功能都可能被支援，或者行為與使用 vue-router 時完全相同。