Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用

Amd794發表於2024-07-28
UXJS路由

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開發

image
image

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

一、Nuxt 中的 useRouter 方法

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

二、基本功能

  1. addRoute()：向路由例項新增新的路由。您可以提供 parentName 將新路由新增為現有路由的子路由。 示例：
const router = useRouter();
router.addRoute({ name: 'newRoute', path: '/newPath', component: NewComponent });
  1. removeRoute()：根據名稱移除現有路由。 示例：
router.removeRoute('newRoute');
  1. getRoutes()：獲取所有路由記錄的完整列表。 示例：
const routes = router.getRoutes();
  1. hasRoute()：檢查是否存在具有給定名稱的路由。 示例：
const hasRoute = router.hasRoute('newRoute');
  1. resolve()：返回路由位置的規範化版本，幷包含一個 href 屬性，其中包含任何現有的基礎路徑。 示例：
const resolvedRoute = router.resolve({ name: 'newRoute' });

三、基於 History API 的操作

  1. back()：如果可能，返回上一頁，與 router.go(-1) 相同。 示例：
router.back();
  1. forward()：如果可能，前進到下一頁，與 router.go(1) 相同。 示例：
router.forward();
  1. go()：在歷史記錄中向前或向後移動，不受 router.back() 和 router.forward() 中施加的層次結構限制。 示例：
router.go(3);  // 向前移動 3 步
  1. push()：透過將新條目推入歷史堆疊來以程式設計方式導航到新的 URL。建議使用 navigateTo 代替。 示例：
router.push({ path: "/newUrl" });
  1. replace()：透過替換當前路由歷史堆疊中的當前條目來以程式設計方式導航到新的 URL。建議使用 navigateTo 代替。 示例：
router.replace({ hash: "#bio" });

四、導航守衛

定義中介軟體

  1. 匿名（或內聯）中介軟體：

    • 直接在頁面的 definePageMeta 方法中定義。
    export default {
  pageMeta: {
    middleware: ['myMiddleware']
  }
}

  2. 命名中介軟體：

    • 放置在 middleware/ 目錄下，並在頁面中透過非同步匯入自動載入。
    // 在 `middleware/` 目錄下建立檔案
export default defineNuxtRouteMiddleware((to, from) => {
  // 中介軟體邏輯
})

  3. 全域性中介軟體：

    • 放置在 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 和錯誤處理

  1. isReady()：返回一個 Promise，在路由完成初始導航時解析。 示例：
const ready = await router.isReady();
  1. 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

往期文章歸檔：

  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog

相關文章