前言

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

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

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

最常用的跳轉(zhuǎn)方式。跳轉(zhuǎn)到新頁(yè)面時(shí)，當(dāng)前頁(yè)面并不會(huì)被銷(xiāo)毀，而是壓入頁(yè)面棧（page stack），用戶可以通過(guò)左滑或返回按鈕回到上一頁(yè)。

適用場(chǎng)景：列表頁(yè) → 詳情頁(yè)、表單頁(yè) → 確認(rèn)頁(yè)、所有需要支持返回的場(chǎng)景。

// 普通跳轉(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)
  }
})

目標(biāo)頁(yè)面通過(guò) onLoad(options) 接收參數(shù)：

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

注意：頁(yè)面棧最多疊加 10 層，超出后 navigateTo 會(huì)靜默失敗。深層嵌套場(chǎng)景請(qǐng)考慮改用 redirectTo。

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

關(guān)閉當(dāng)前頁(yè)面再打開(kāi)新頁(yè)面，當(dāng)前頁(yè)面會(huì)被銷(xiāo)毀。用戶在新頁(yè)面無(wú)法通過(guò)返回鍵回到被關(guān)閉的那一頁(yè)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、uni.navigateBack — 返回上級(jí)

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

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

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

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

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

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

七、實(shí)際開(kāi)發(fā)建議

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

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

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

最新評(píng)論