uniapp頁(yè)面跳轉(zhuǎn)

官方詳情介紹
uni-app的頁(yè)面跳轉(zhuǎn)只能跳轉(zhuǎn)本地頁(yè)面，且目標(biāo)頁(yè)面必須在pages.json中注冊(cè)。跳轉(zhuǎn)方式與小程序/vue的極為相似，只是方法和標(biāo)簽有所不同，分為和兩種。

一、標(biāo)簽跳轉(zhuǎn)：

類似Vue的<router-link>標(biāo)簽

<navigator url="...?key=value">頁(yè)面跳轉(zhuǎn)</navigator>

二、事件方法跳轉(zhuǎn)

類似Vue router.push({ path: 'xxx' }) 方法，uni-app提供了6鐘不同的跳轉(zhuǎn)方式，以uni.xxx方式調(diào)用。
官網(wǎng)詳情

①uni.navigateTo(object)：

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，可使用uni.navigateBack返回到原頁(yè)面
object參數(shù)說(shuō)明（其他跳轉(zhuǎn)方式的參數(shù)與之大同小異）：

uni.navigateTo(OBJECT)

uni.navigateTo({
    url: 'route?key1=value1&key2=value2'   
});

接收數(shù)據(jù)（其他跳轉(zhuǎn)方式的接收參數(shù)方法與之相同）：

onLoad: function (option) { 
  //option為object類型，會(huì)序列化上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)
  console.log(option.key1); //輸出 value1
  console.log(option.key2); //輸出 value2
}

②uni.redirectTo(object)：

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面 ，可理解為重定向頁(yè)面

uni.redirectTo({
    url: 'route?key1=value1&key2=value2'   
});

③uni.reLaunch(object)：

關(guān)閉所有頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
注意： 如果調(diào)用了 uni.preloadPage(OBJECT)不會(huì)關(guān)閉，僅觸發(fā)生命周期 onHide

uni.reLaunch({
    url:  'route?key1=value1&key2=value2'   
});

④uni.switchTab(object)：

跳轉(zhuǎn)到tabBar頁(yè)面，并 關(guān)閉所有非tabBar頁(yè)面
注意： 如果調(diào)用了 uni.preloadPage(OBJECT)不會(huì)關(guān)閉，僅觸發(fā)生命周期 onHide

uni.switchTab({
    url: '/pages/index/index'
});

⑤uni.navigateBack(object)：

返回上一頁(yè)面/多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層

uni.navigateBack({
    delta: 3//返回上上上個(gè)頁(yè)面
});

⑥uni.preloadPage：

預(yù)加載頁(yè)面，是一種性能優(yōu)化技術(shù)。被預(yù)載的頁(yè)面，在打開時(shí)速度更快。
平臺(tái)差異說(shuō)明：

image.png

H5 平臺(tái)：
預(yù)加載 /pages/test/test 對(duì)應(yīng)的js文件，不執(zhí)行頁(yè)面預(yù)渲染邏輯

uni.preloadPage({url: "/pages/test/test"});

App-nvue 平臺(tái)：
預(yù)加載nvue頁(yè)面 /pages/test/test

uni.preloadPage({url: "/pages/test/test"});

注意事項(xiàng)

1. App平臺(tái)僅支持預(yù)加載 nvue 頁(yè)面，執(zhí)行頁(yè)面預(yù)渲染，預(yù)載時(shí)觸發(fā)生命周期 onLoad，onReady，不觸發(fā) onShow
2. 打開新頁(yè)面時(shí)，url 完全相同（包含參數(shù)）時(shí)，優(yōu)先使用預(yù)加載頁(yè)面，觸發(fā)生命周期 onShow
3. tabbar頁(yè)面，僅支持預(yù)加載尚未顯示過(guò)的頁(yè)面，否則返回 fail，提示 already exists
4. 同一時(shí)間，相同 url 僅 preloadPage 一次
5. 當(dāng)同一個(gè)預(yù)載頁(yè)面已被打開(在路由棧)，再次打開相同url時(shí)，不再使用該預(yù)加載頁(yè)面，而是打開新的非預(yù)載頁(yè)面
6. uni.reLanuch, uni.switchTab, uni.navigateBack(含Android返回鍵) 切換頁(yè)面時(shí)，預(yù)加載頁(yè)面不會(huì)被銷毀，僅觸發(fā)生命周期 onHide
7. 在預(yù)載頁(yè)面使用 uni.redirectTo 時(shí)，預(yù)加載頁(yè)面會(huì)被銷毀，觸發(fā)生命周期 onUnload

e.g.

uni.preloadPage({url: "/pages/test/test"}); // 預(yù)加載 /pages/test/test 頁(yè)面（僅觸發(fā)onLoad，onReady)
uni.navigateTo({url: "/pages/test/test"}); // url匹配，跳轉(zhuǎn)預(yù)加載頁(yè)面（僅觸發(fā)onShow)
uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配，正常打開新頁(yè)面

HBuilderX 2.7.12+的hello uni-app，在navigator示例和uni ui的日歷示例中增加了頁(yè)面預(yù)載示例。