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 提供的行為相同。

閱讀 vue-router 關於 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 有一個路由中介軟體的概念，它簡化了導航守衛的實現並提供了更好的開發體驗。

更多資訊請閱讀：文件 > 4 X > 指南 > 目錄結構 > App > Middleware。

Promise 和錯誤處理

  • isReady(): 返回一個 Promise，該 Promise 在路由器完成初始導航時解析。
  • onError: 新增一個錯誤處理程式，每當導航期間發生未捕獲的錯誤時都會呼叫它。
在Vue Router 文件中瞭解更多。

通用路由器例項

如果你沒有 app/pages/ 資料夾，那麼 useRouter 將返回一個具有類似輔助方法的通用路由器例項，但請注意，並非所有功能都受支援或與 vue-router 的行為完全相同。