如何實(shí)現(xiàn)小程序頁(yè)面之間的導(dǎo)航跳轉(zhuǎn)？

頁(yè)面導(dǎo)航指的是頁(yè)面之間的相互跳轉(zhuǎn)。例如，瀏覽器中實(shí)現(xiàn)頁(yè)面導(dǎo)航的方式有l(wèi)ocation.href和<a>鏈接。小程序中實(shí)現(xiàn)頁(yè)面導(dǎo)航的兩種方式聲明式導(dǎo)航和編程式導(dǎo)航。

聲明式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁(yè)面

tabBar 頁(yè)面指的是被配置為 tabBar 的頁(yè)面。在使用<navigator>組件跳轉(zhuǎn)到指定的 tabBar 頁(yè)面時(shí)，需要指定 url 屬性和 open-type 屬性，其中：url 表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以 / 開(kāi)頭 open-type 表示跳轉(zhuǎn)的方式，必須為 switchTab，示例代碼如下：

<navigator url="/pages/message/message"open-type="switchTab">導(dǎo)航到消息頁(yè)面</navigator>

2. 導(dǎo)航到非 tabBar 頁(yè)面

非 tabBar 頁(yè)面指的是沒(méi)有被配置為 tabBar 的頁(yè)面。在使用組件跳轉(zhuǎn)到普通的非 tabBar 頁(yè)面時(shí)，則需要指定 url 屬性和 open-type 屬性，其中：

url 表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以 / 開(kāi)頭，open-type 表示跳轉(zhuǎn)的方式，必須為 navigate。示例代碼如下：

<navigator url="/pages/info/info"open-type="navigate">導(dǎo)航到info頁(yè)面</navigator>

注意：為了簡(jiǎn)便，在導(dǎo)航到非 tabBar 頁(yè)面時(shí)，open-type="navigate" 屬性可以省略。

3. 后退導(dǎo)航

如果要后退到上一頁(yè)面或多級(jí)頁(yè)面，則需要指定 open-type 屬性和 delta 屬性，其中：open-type 的值必須是 navigateBack，表示要進(jìn)行后退導(dǎo)航，delta 的值必須是數(shù)字，表示要后退的層級(jí)。示例代碼如下：

<navigator open-type='navigateBack'delta='1'>返回上一頁(yè)</navigator>

注意：為了簡(jiǎn)便，如果只是后退到上一頁(yè)面，則可以省略 delta 屬性，因?yàn)槠淠J(rèn)值就是 1。

編程式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁(yè)面

調(diào)用 wx.switchTab(Object object) 方法，可以跳轉(zhuǎn)到 tabBar 頁(yè)面。其中 Object 參數(shù)對(duì)象的屬性列表如下

3. 后退導(dǎo)航

示例代碼如下：

//頁(yè)面結(jié)構(gòu)
<button bindtap="gotoBack">后退</button>

//編程式導(dǎo)航，后退到上一頁(yè)面
gotoBack(){
  wx.navigateBack()
}

導(dǎo)航傳參

1. 聲明式導(dǎo)航傳參

navigator 組件的 url 屬性用來(lái)指定將要跳轉(zhuǎn)到的頁(yè)面的路徑。同時(shí)，路徑的后面還可以攜帶參數(shù)：

參數(shù)與路徑之間使用 ? 分隔

參數(shù)鍵與參數(shù)值用 = 相連

不同參數(shù)用 & 分隔

代碼示例如下：

<navigator url="/pages/info/info?name=zs&age=20">跳轉(zhuǎn)到info頁(yè)面</navigator>

2. 編程式導(dǎo)航傳參

調(diào)用 wx.navigateTo(Object object) 方法跳轉(zhuǎn)頁(yè)面時(shí)，也可以攜帶參數(shù)，代碼示例如下：

//頁(yè)面結(jié)構(gòu)
<button bindtap="gotoInfo2">跳轉(zhuǎn)到info頁(yè)面</button>

//通過(guò)編程式導(dǎo)航，跳轉(zhuǎn)到 info頁(yè)面，并攜帶參數(shù)
gotoInfo2() {
  wx.navigateTo({
    url:'/pages/info/info?name=ls&gender=男'
  }）
}

3. 在 onLoad 中接收導(dǎo)航參數(shù)

通過(guò)聲明式導(dǎo)航傳參或編程式導(dǎo)航傳參所攜帶的參數(shù)，可以直接在 onLoad 事件中直接獲取到，示例代碼如下：

/**
*生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function(options){
   // options 就是導(dǎo)航傳遞過(guò)來(lái)的參數(shù)對(duì)象
   console.log(options)
}