使用 navigateTo 實現靈活的路由導航

Amd794發表於2024-08-13
路由

title: 使用 navigateTo 實現靈活的路由導航
date: 2024/8/13
updated: 2024/8/13
author: cmdragon

excerpt:
摘要：本文詳細介紹 Nuxt.js 中的 navigateTo 函式，包括基本用法、在路由中介軟體中使用、導航到外部 URL 和新標籤頁開啟連結的方法，以及引數詳解和注意事項，展示了該函式在程式化導航中的靈活性和強大功能。

categories:

  • 前端開發

tags:

  • Nuxtjs
  • 路由
  • 導航
  • 程式設計
  • Web
  • 中介軟體
  • URL

image
image

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

使用 navigateTo 函式的詳細指南

navigateTo 是 Nuxt.js 中一個非常強大的導航輔助函式，允許開發者以程式設計的方式導航使用者，支援服務端與客戶端的環境。

什麼是 navigateTo？

navigateTo 允許我們在自己的程式碼中靈活地重定向到不同的路由。它可以以字串或者路由物件的形式接收目標路徑，並支援多種選項來定製導航行為。

基本用法

在 Vue 元件中使用 navigateTo 非常簡單。以下是一些常見用法的示例：

導航到簡單路徑


<script setup lang="ts">

  // 導航到 '/search'
  await navigateTo('/search')
</script>

導航到路由物件

你也可以將路由物件作為引數傳遞：


<script setup lang="ts">

  // 使用路由物件導航
  await navigateTo({path: '/search'})
</script>

帶查詢引數的路由物件

如果需要新增查詢引數，可以這樣做：


<script setup lang="ts">

  // 導航到帶有查詢引數的路徑
  await navigateTo({
    path: '/search',
    query: {
      page: 1,
      sort: 'asc'
    }
  })
</script>

在路由中介軟體中使用

navigateTo 還可以在路由中介軟體中使用來實現重定向：

// middleware/redirect.js
export default defineNuxtRouteMiddleware((to, from) => {
    if (to.path !== '/search') {
        // 永久重定向到 '/search'
        return navigateTo('/search', {redirectCode: 301})
    }
})

導航到外部 URL

預設情況下，navigateTo 不允許導航到外部 URL。如果需要，可以設定 external 引數為 true。


<script setup lang="ts">

  // 導航到外部URL
  await navigateTo('https://nuxt.com', {external: true})
</script>

在新標籤頁中開啟連結

如果想在新標籤頁中開啟連結，可以使用 open 選項：


<script setup lang="ts">

  // 在新標籤頁中開啟連結
  await navigateTo('https://nuxt.com', {
    open: {
      target: '_blank',
      windowFeatures: {
        width: 500,
        height: 500
      }
    }
  })
</script>

引數詳解

  • to:
    • 型別: RouteLocationRaw | undefined | null
    • 預設值: '/'
    • 解釋: 這是目標路由，可以是字串或路由物件。當其值為 undefined 或 null 時，預設導航到根路由 '/'。

可選引數 (options)

  • replace:

    • 型別: boolean
    • 預設值: false
    • 解釋: 如果設定為 true，則會用新路由替換當前路由，而不是將其推入歷史記錄。

  • redirectCode:

    • 型別: number
    • 預設值: 302
    • 解釋: 在伺服器端重定向時，使用的狀態碼。可以使用 301 表示永久重定向。

  • external:

    • 型別: boolean
    • 預設值: false
    • 解釋: 如果設定為 true，則可以導航到外部 URL。預設為不允許外部連結。

  • open:

    • 型別: OpenOptions
    • 解釋: 用於在客戶端上透過 window.open() 方法導航到 URL。伺服器端將忽略該選項。

    OpenOptions 的屬性:

    • target:

      • 型別: string
      • 預設值: '_blank'
      • 解釋: 定義載入資源的上下文名稱。

    • windowFeatures:

      • 型別: OpenWindowFeatures
      • 解釋: 這組屬性控制新視窗的一些特性，如尺寸和位置。

      OpenWindowFeatures 的屬性:

      • popup: boolean
      • width / innerWidth: number
      • height / innerHeight: number
      • left / screenX: number
      • top / screenY: number
      • noopener: boolean
      • noreferrer: boolean

示例：使用全部選項

下面是一個複雜的示例，展示如何使用所有選項進行導航：


<script setup lang="ts">

  // 複雜的導航示例
  await navigateTo('https://example.com', {
    external: true,
    open: {
      target: '_blank',
      windowFeatures: {
        width: 800,
        height: 600,
        popup: true
      }
    }
  })
</script>

注意事項

  • 在呼叫 navigateTo 時，請確保使用 await 或 return 處理其結果，因為它返回一個 Promise。
  • 使用中介軟體時請注意重定向程式碼的選擇，根據資訊的更新狀態選擇合適的狀態碼。

總結

navigateTo 是一個非常強大的工具，能夠以靈活和高效的方式進行導航。無論是簡單的路由跳轉還是複雜的外部 URL
開啟，navigateTo 都可以輕鬆實現

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 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
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog

相關文章