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

Amd794發表於2024-08-14
函式

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

excerpt:
摘要：本文介紹了在Nuxtjs中使用onBeforeRouteLeave組合式函式來提升應用使用者體驗的方法。onBeforeRouteLeave允許在元件離開當前路由前執行邏輯，如處理路由變化、清理資源、儲存資料等。文章透過示例展示瞭如何在Vue元件中註冊此守衛，解釋了其引數含義及使用注意事項，並提供了完整示例程式碼，強調了此功能對增強使用者體驗的重要性。

categories:

  • 前端開發

tags:

  • Vue
  • Nuxt
  • 路由
  • 元件
  • 前端
  • Web
  • 開發

image
image

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

詳細指南：使用 onBeforeRouteLeave 組合式函式

在nuxtjs中，onBeforeRouteLeave 是一個非常有用的功能，它允許你在元件即將離開時執行一些邏輯。這在處理路由變化、清理資源、儲存資料等場景中尤為重要。

什麼是 onBeforeRouteLeave？

onBeforeRouteLeave 是一個組合式函式，用於在元件即將離開當前路由時執行某些操作。它類似於 Vue Router 的 beforeRouteLeave 路由守衛，但可以在任何元件中使用。這意味著你可以在元件內註冊一個鉤子函式來響應路由離開的事件。

如何使用 onBeforeRouteLeave？

1. 在元件中使用 onBeforeRouteLeave

在你的 Vue 元件中，你可以透過 onBeforeRouteLeave 函式來註冊一個路由守衛。以下是一個簡單的示例，展示瞭如何使用這個功能：

<template>
  <div>
    <h1>當前元件</h1>
    <button @click="navigate">跳轉到其他頁面</button>
  </div>
</template>

<script setup>

const router = useRouter()

// 跳轉到其他頁面的函式
const navigate = () => {
  router.push('/another-page')
}

// 註冊 onBeforeRouteLeave 守衛
onBeforeRouteLeave((to, from, next) => {
  // 在使用者離開當前元件前，執行一些邏輯
  const shouldLeave = confirm('你確定要離開嗎？')
  if (shouldLeave) {
    next()
  } else {
    next(false) // 阻止導航
  }
})
</script>

3. 引數詳解

onBeforeRouteLeave 函式接收一個 NavigationGuard 函式作為引數。這個函式可以訪問以下引數：

  • to: 目標路由物件，包含即將導航到的路由資訊。
  • from: 當前路由物件，包含當前路由的資訊。
  • next: 導航控制函式，用於允許或阻止導航。

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

示例

使用 RouteLocationNormalized 時，你可以輕鬆訪問路由資訊，比如：

router.beforeEach((to, from) => {
  console.log(to.fullPath); // 輸出完整路徑
  console.log(to.query);     // 輸出查詢引數
});

這樣，你能在路由變化時獲取到詳細的路由資訊並做出相應的處理。

4. 示例解析

在上面的示例中，我們在 onBeforeRouteLeave 中使用了一個確認對話方塊來詢問使用者是否確定要離開當前頁面。如果使用者選擇離開（點選“確定”），我們呼叫 next() 允許導航。如果使用者選擇取消（點選“取消”），我們呼叫 next(false) 阻止導航。

5. 完整的示例

下面是一個完整的 Vue 元件示例，展示瞭如何在實際專案中使用 onBeforeRouteLeave：

<template>
  <div>
    <h1>編輯表單</h1>
    <form @submit.prevent="save">
      <input v-model="formData" placeholder="輸入一些內容" />
      <button type="submit">儲存</button>
    </form>
    <button @click="navigate">前往其他頁面</button>
  </div>
</template>

<script setup>

const router = useRouter()
const formData = ref('')

// 儲存表單資料
const save = () => {
  // 模擬儲存操作
  console.log('資料已儲存:', formData.value)
}

// 導航到其他頁面的函式
const navigate = () => {
  router.push('/another-page')
}

// 註冊 onBeforeRouteLeave 守衛
onBeforeRouteLeave((to, from, next) => {
  if (formData.value.trim() !== '') {
    const shouldLeave = confirm('你有未儲存的更改，確定要離開嗎？')
    if (shouldLeave) {
      next()
    } else {
      next(false) // 阻止導航
    }
  } else {
    next() // 直接允許導航
  }
})
</script>

6. 常見問題

Q1: onBeforeRouteLeave 是否在元件解除安裝時自動移除？

是的，當元件被解除安裝時，onBeforeRouteLeave 中註冊的守衛會自動被移除，無需手動清理。

Q2: onBeforeRouteLeave 只能在 setup 函式中使用嗎？

是的，onBeforeRouteLeave 是 Vue 3 Composition API 的一部分，因此只能在 setup 函式中使用。如果你使用 Options API，應該使用 beforeRouteLeave 路由守衛。

總結

onBeforeRouteLeave 是一個強大的工具，用於在元件離開時執行自定義邏輯。無論是處理使用者確認、儲存資料還是清理資源，這個功能都能大大提升你的應用的使用者體驗。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 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
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog

相關文章