Nuxt.js 路由管理：useRouter 方法與路由中間件應用

title: Nuxt.js 路由管理：useRouter 方法與路由中間件應用 date: 2024/7/28 updated: 2024/7/28 author: cmdragon excerpt: 摘要：本文介紹了Nuxt 3中useRouter方法及其在路由管理和中間件應用中的功能。內容包括 ...

title: Nuxt.js 路由管理：useRouter 方法與路由中間件應用
date: 2024/7/28
updated: 2024/7/28
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt 3中useRouter方法及其在路由管理和中間件應用中的功能。內容包括使用useRouter添加、移除路由，獲取路由信息，基於History API的操作，導航守衛的實現，如定義匿名、命名及全局中間件，以及使用navigateTo和abortNavigation輔助函數。同時，還涉及Promise和錯誤處理，最後通過一個示例展示了useRouter的常見用法。

categories:

前端開發

tags:

Nuxt.js
路由管理
useRouter
中間件
前端開發
Vue.js
Web開發

掃描二維碼關註或者微信搜一搜：編程智域前端至全棧交流與成長

一、Nuxt 中的 `useRouter` 方法

useRouter 是 Nuxt 3 提供的一個用於處理路由的重要工具。它讓您能夠在應用中方便地進行各種路由操作。比如添加路由、導航、路由守衛等。

二、基本功能

addRoute()：向路由實例添加新的路由。您可以提供 parentName 將新路由添加為現有路由的子路由。示例：

const router = useRouter();
router.addRoute({ name: 'newRoute', path: '/newPath', component: NewComponent });

removeRoute()：根據名稱移除現有路由。示例：

router.removeRoute('newRoute');

getRoutes()：獲取所有路由記錄的完整列表。示例：

const routes = router.getRoutes();

hasRoute()：檢查是否存在具有給定名稱的路由。示例：

const hasRoute = router.hasRoute('newRoute');

resolve()：返迴路由位置的規範化版本，並包含一個 href 屬性，其中包含任何現有的基礎路徑。示例：

const resolvedRoute = router.resolve({ name: 'newRoute' });

三、基於 History API 的操作

back()：如果可能，返回上一頁，與 router.go(-1) 相同。示例：

router.back();

forward()：如果可能，前進到下一頁，與 router.go(1) 相同。示例：

router.forward();

go()：在歷史記錄中向前或向後移動，不受 router.back() 和 router.forward() 中施加的層次結構限制。示例：

router.go(3);  // 向前移動 3 步

push()：通過將新條目推入歷史堆棧來以編程方式導航到新的 URL。建議使用 navigateTo 代替。示例：

router.push({ path: "/newUrl" });

replace()：通過替換當前路由歷史堆棧中的當前條目來以編程方式導航到新的 URL。建議使用 navigateTo 代替。示例：

router.replace({ hash: "#bio" });

四、導航守衛

定義中間件

匿名（或內聯）中間件：
- 直接在頁面的 definePageMeta 方法中定義。
```
export default {
  pageMeta: {
    middleware: ['myMiddleware']
  }
}
```

命名中間件：

放置在 middleware/ 目錄下，併在頁面中通過非同步導入自動載入。

// 在 `middleware/` 目錄下創建文件
export default defineNuxtRouteMiddleware((to, from) => {
  // 中間件邏輯
})

全局中間件：

放置在 middleware/ 目錄下，並以 .global 尾碼結尾。

// 在 `middleware/` 目錄下創建文件
export default defineNuxtRouteMiddleware((to, from) => {
  // 全局中間件邏輯
})

使用輔助函數

Nuxt.js 提供了兩個全局可用的輔助函數來處理導航：

navigateTo：用於重定向到給定的路由。
```
return navigateTo('/new-route')
```
abortNavigation：用於中止當前的導航。
```
return abortNavigation()
```

返回值

中間件返回的值決定了導航的行為：

無：不阻止導航，將繼續執行下一個中間件函數（如果有的話），或者完成路由導航。
navigateTo：重定向到給定的路徑，併在伺服器端發生重定向時設置重定向代碼為 302 Found 或 301 Moved Permanently。
abortNavigation：停止當前的導航。
abortNavigation(error) ：拒絕當前的導航並提供錯誤信息。

示例

假設我們有一個中間件用於檢查用戶是否登錄，如果未登錄則重定向到登錄頁面：

export default defineNuxtRouteMiddleware((to, from) => {
  if (!userIsLoggedIn()) {
    return navigateTo('/login')
  }
})

註意事項

避免無限迴圈：在重定向之前檢查 to.path 是很重要的，否則可能會導致無限重定向迴圈。
使用輔助函數：推薦使用 navigateTo 和 abortNavigation 輔助函數來執行重定向或停止導航，以確保與 Nuxt.js 的集成和未來的相容性。
瞭解變更風險：儘管 navigateTo 和 abortNavigation 輔助函數是推薦使用的，但其他在 vue-router 文檔中描述的返回值可能也能工作。然而，未來 Nuxt.js 可能會對這些返回值進行更改，因此使用官方推薦的方法是最安全的。

五、Promise 和錯誤處理

isReady()：返回一個 Promise，在路由完成初始導航時解析。示例：

const ready = await router.isReady();

onError：添加一個錯誤處理程式，每次導航期間發生未捕獲的錯誤時都會調用該處理程式。

六、示例應用

以下是一個簡單的 Nuxt 3 應用示例，展示瞭如何使用 useRouter 的一些常見功能：

// pages/index.vue
<template>
  <div>
    <h1>Nuxt 3 Router Demo</h1>
    <button @click="addNewRoute">Add New Route</button>
    <button @click="removeRoute">Remove Route</button>
    <button @click="goToNewUrl">Go to New URL</button>
  </div>
</template>

<script setup>

const addNewRoute = () => {
  router.addRoute({ name: 'newRoute', path: '/newPath', component: () => import('./NewComponent.vue') });
};

const removeRoute = () => {
  router.removeRoute('newRoute');
};

const goToNewUrl = () => {
  router.push({ path: '/newPath' });
};
</script>

餘下文章內容請點擊跳轉至個人博客頁面或者掃碼關註或者微信搜一搜：編程智域前端至全棧交流與成長，閱讀完整的文章：Nuxt.js 路由管理：useRouter 方法與路由中間件應用 | cmdragon's Blog