使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗

Amd794發表於2024-08-15
函式

title: 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗
date: 2024/8/15
updated: 2024/8/15
author: cmdragon

excerpt:
摘要：本文介紹如何在Nuxt 3開發中使用onBeforeRouteUpdate組合式函式來提升應用使用者體驗。透過在元件中註冊路由更新守衛，開發者能夠在路由變更前執行特定操作，如許可權檢查或資料更新，示例展示了在User.vue元件中使用此功能的過程與注意事項。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 路由
  • 元件
  • 守衛
  • 使用者
  • 測試
  • 體驗

image
image

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

介紹

在使用 Nuxt 3 進行開發時，你可能會需要在元件中註冊路由守衛，以便在路由更新之前進行一些特定的操作。這就是 onBeforeRouteUpdate 的用武之地。onBeforeRouteUpdate 是一個組合式函式，它允許你在元件中註冊路由更新的守衛，類似於 beforeRouteUpdate 鉤子，但可以在任何元件中使用。

onBeforeRouteUpdate 概述

onBeforeRouteUpdate 函式的簽名如下：

onBeforeRouteUpdate(updateGuard): void

引數

  • updateGuard: 一個 NavigationGuard 函式，用於定義當路由更新時需要執行的操作。

返回值

  • void: 此函式沒有返回值。

NavigationGuard 是一個介面，定義了路由守衛的功能。其簽名如下：

NavigationGuard(to, from, next): NavigationGuardReturn | Promise<NavigationGuardReturn>

引數

  • to (RouteLocationNormalized): 目標路由物件，包含即將進入的路由資訊。

  • from (RouteLocationNormalized): 當前路由物件，包含即將離開的路由資訊。

  • next (NavigationGuardNext): 控制導航的函式。用於決定是否允許導航繼續，或阻止導航並提供錯誤資訊。

RouteLocationNormalized 是 Vue Router 中用於表示路由位置的介面，類似於 RouteLocation，但有一些重要的區別。以下是對其屬性和功能的詳細解釋：

屬性說明

  1. fullPath:

    • 型別: string
    • 描述: 包含搜尋和雜湊的完整地址，經過百分號編碼。

  2. hash:

    • 型別: string
    • 描述: 當前地址的雜湊部分，以 # 開頭（如果存在）。

  3. matched:

    • 型別: RouteRecordNormalized[]
    • 描述: 包含與當前路由匹配的路由記錄陣列，但不包括重定向的記錄。

  4. meta:

    • 型別: RouteMeta
    • 描述: 從所有匹配的路由記錄中合併的後設資料屬性。

  5. name:

    • 型別: undefined | null | RouteRecordName
    • 描述: 當前匹配的路由名稱。

  6. params:

    • 型別: RouteParams
    • 描述: 從路徑中提取並解碼的引數物件。

  7. path:

    • 型別: string
    • 描述: 經過百分號編碼的 URL 中的路徑部分。

  8. query:

    • 型別: LocationQuery
    • 描述: 代表當前地址的搜尋屬性的物件。

  9. redirectedFrom:

    • 型別: undefined | RouteLocation
    • 描述: 在重定向到當前地址之前，最初想訪問的地址。

注意事項

  • RouteLocationNormalized 的 matched 陣列不包括重定向的記錄，這使其在處理導航時更清晰，特別是在有複雜路由配置時。
  • 透過使用這些屬性，開發者可以靈活地訪問和操作路由狀態，從而實現更加動態的使用者體驗。

如何使用 onBeforeRouteUpdate

建立元件

在 pages 目錄下，建立一個新的元件檔案 User.vue，程式碼如下：

<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ userId }}</p>
    <p><router-link :to="{ name: 'User', params: { id: userId === '1' ? '2' : '1' }}">Toggle User</router-link></p>
  </div>
</template>

<script setup>

const props = defineProps(['id'])

const userId = ref(props.id)

onBeforeRouteUpdate((to, from, next) => {
  // 在路由更新之前執行某些操作，例如檢查使用者訪問許可權
  console.log(`Navigating from user ${from.params.id} to user ${to.params.id}`)
  // 更新使用者 ID
  userId.value = to.params.id
  next() // 繼續導航
})
</script>

更新路由配置

確保你的路由配置能夠正確地傳遞 id 引數。在 pages 資料夾中，建立一個名為 _id.vue 的檔案，下面是示例程式碼：

<template>
  <User :id="id" />
</template>

<script setup>
const route = useRoute()
const id = route.params.id
</script>

測試應用

啟動你的 Nuxt 3 應用程式：

npm run dev

然後訪問 http://localhost:3000/1，你應該能看到使用者 ID 為 1 的資訊。點選連結將跳轉到使用者 ID 為 2 的資訊，並在控制檯列印跳轉資訊。

總結

onBeforeRouteUpdate 是 Nuxt 3 中一個非常強大的特性，它使得在路由更新之前能夠靈活地執行自定義邏輯，從而增強使用者體驗。透過在元件中使用這個守衛，你可以輕鬆地管理路由變化，確保適當的資料處理和安全檢查。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog

往期文章歸檔：

  • 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 navigateTo 實現靈活的路由導航 | cmdragon's Blog
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 | cmdragon's Blog
  • 掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置 | cmdragon's Blog
  • 使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog
  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog

相關文章