前言

在 UniApp 開發(fā)中，頁面間的跳轉(zhuǎn)是最常見的操作之一。UniApp 提供了 5 種路由 API，分別對應(yīng)不同的跳轉(zhuǎn)場景。選錯跳轉(zhuǎn)方式輕則體驗變差，重則出現(xiàn)"無法返回""Tab 頁跳轉(zhuǎn)失敗"等讓人頭疼的 bug。

本文將逐一講解 5 種跳轉(zhuǎn)方式的原理、適用場景與代碼示例，并附上橫向?qū)Ρ缺?，方便日常查閱?/p>

一、uni.navigateTo — 保留式跳轉(zhuǎn)

最常用的跳轉(zhuǎn)方式。跳轉(zhuǎn)到新頁面時，當前頁面并不會被銷毀，而是壓入頁面棧（page stack），用戶可以通過左滑或返回按鈕回到上一頁。

適用場景：列表頁 → 詳情頁、表單頁 → 確認頁、所有需要支持返回的場景。

// 普通跳轉(zhuǎn)
uni.navigateTo({
  url: '/pages/detail/index?id=1&type=alarm',
  success(res) {
    console.log('跳轉(zhuǎn)成功')
  },
  fail(err) {
    console.log('跳轉(zhuǎn)失敗', err)
  }
})

目標頁面通過 onLoad(options) 接收參數(shù)：

onLoad(options) {
  const id = options.id     // '1'
  const type = options.type // 'alarm'
}

注意：頁面棧最多疊加 10 層，超出后 navigateTo 會靜默失敗。深層嵌套場景請考慮改用 redirectTo。

二、uni.redirectTo — 替換式跳轉(zhuǎn)

關(guān)閉當前頁面再打開新頁面，當前頁面會被銷毀。用戶在新頁面無法通過返回鍵回到被關(guān)閉的那一頁。

適用場景：登錄成功 → 首頁、表單提交完成 → 結(jié)果頁、中間跳板頁。

// 登錄成功后跳轉(zhuǎn)首頁，不允許返回登錄頁
uni.redirectTo({
  url: '/pages/home/index'
})

適合"一次性"操作完成后的跳轉(zhuǎn)，比如支付成功頁、注冊完成頁。防止用戶按返回鍵重復觸發(fā)操作。

三、uni.reLaunch — 全清重置跳轉(zhuǎn)

關(guān)閉所有頁面后，打開指定頁面。頁面棧被完全清空，是"最徹底"的跳轉(zhuǎn)方式。

適用場景：退出登錄、切換賬號、應(yīng)用重置。

// 退出登錄，清空所有頁面歷史，跳回登錄頁
uni.reLaunch({
  url: '/pages/login/index'
})

// reLaunch 也支持跳轉(zhuǎn)到 tabBar 頁面（這點與 redirectTo 不同）
uni.reLaunch({
  url: '/pages/home/index'
})

四、uni.switchTab — Tab 頁跳轉(zhuǎn)

專門用于跳轉(zhuǎn)到 pages.json 中配置了 tabBar 的頁面。跳轉(zhuǎn)時會關(guān)閉所有非 tabBar 頁面。

適用場景：底部 Tab 切換、業(yè)務(wù)流程結(jié)束回到主頁。

// 跳轉(zhuǎn)到首頁 Tab（必須在 pages.json tabBar 中配置）
uni.switchTab({
  url: '/pages/home/index'
})

// ? 錯誤：switchTab 不支持 url 傳參
uni.switchTab({
  url: '/pages/home/index?from=detail' // 參數(shù)會被忽略
})

注意：switchTab 的 url 不能帶參數(shù)。如果需要向 Tab 頁傳遞數(shù)據(jù)，可以通過 Pinia / 全局變量 / Storage 中轉(zhuǎn)。

五、uni.navigateBack — 返回上級

關(guān)閉當前頁面，返回上一頁或多級頁面。delta 指定返回層級數(shù)，默認為 1。

適用場景：表單取消、彈窗關(guān)閉、跨級返回。

// 返回上一頁
uni.navigateBack({ delta: 1 })

// 返回兩層（跳過中間頁）
uni.navigateBack({ delta: 2 })

// 返回時向上一頁傳遞數(shù)據(jù)（通過 getCurrentPages）
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.setData?.({ refreshed: true })
uni.navigateBack({ delta: 1 })

六、橫向?qū)Ρ瓤偨Y(jié)

七、實際開發(fā)建議

1. 優(yōu)先 navigateTo，保留返回能力，符合用戶操作習慣。
2. 注意頁面棧上限，棧深超過 10 層時 navigateTo 會失敗，可在關(guān)鍵節(jié)點改用 redirectTo。
3. tabBar 頁面只能用 switchTab 跳轉(zhuǎn)，用 navigateTo/redirectTo 跳轉(zhuǎn) tabBar 頁會失敗或表現(xiàn)異常。
4. switchTab 傳參走 Pinia，禁止在 url 上拼參數(shù)，改用全局狀態(tài)管理傳遞跨頁數(shù)據(jù)。
5. reLaunch 謹慎使用，會清空全部歷史，用戶無法回退，只適合登出/重置等破壞性操作。

在 Vue 3 + TypeScript 項目中，建議封裝一個統(tǒng)一的 router 工具函數(shù)，內(nèi)部根據(jù)目標路徑是否為 tabBar 自動選擇 switchTab 或 navigateTo，減少每次手動判斷的心智負擔。

到此這篇關(guān)于UniApp實現(xiàn)頁面跳轉(zhuǎn)的5種路由方式詳解與實戰(zhàn)對比的文章就介紹到這了,更多相關(guān)UniApp頁面跳轉(zhuǎn)方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論