什么是頁(yè)面導(dǎo)航

頁(yè)面導(dǎo)航指的是頁(yè)面之間的相互跳轉(zhuǎn)。例如，瀏覽器中實(shí)現(xiàn)的頁(yè)面導(dǎo)航的方式有兩種：

1. 連接
2. location.href

小程序中實(shí)現(xiàn)頁(yè)面導(dǎo)航的兩種方式

聲明式導(dǎo)航

在頁(yè)面上聲明一個(gè)導(dǎo)航組件
通過(guò)點(diǎn)擊組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

導(dǎo)航TabBar頁(yè)面

是指配置TabBar頁(yè)面
在使用組件跳轉(zhuǎn)到指定的tabBar頁(yè)面，需要指定url屬性和open-type屬性，其中：

• url表示要跳轉(zhuǎn)的頁(yè)面的地址，必須/開(kāi)頭
• open-type表示跳轉(zhuǎn)方式，必須switchTab

必須指定open-type屬性
示例代碼：

<navigator url="/pages/home/home" open-type="switchTab">導(dǎo)航到首頁(yè)</navigator>

導(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">非tabBar跳轉(zhuǎn)</navigator>

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

后退屬性

如果要后退到上一頁(yè)或者多級(jí)頁(yè)面，則需要指定opene-type屬性和delta屬性，其中：

• open-type的值必須是navigateBack，表示進(jìn)行后退導(dǎo)航
• delta的值必須是數(shù)字，表示要后退的層數(shù)

<navigator url="" open-type="navigateBack" delta="1">返回上一級(jí)目錄</navigator>

注意：如果知識(shí)后退到上一頁(yè)面，則可以省略delta屬性，因?yàn)槟J(rèn)值就是1

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

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

• 參數(shù)和路徑之間使用？分割
• 參數(shù)鍵與參數(shù)值用=相連
• 不同參數(shù)用&分割

<navigator url="/pages/info/info?name=zhangsan&age=20">跳轉(zhuǎn)到info目錄進(jìn)行穿參數(shù)</navigator>

編程式導(dǎo)航

調(diào)用小程序的導(dǎo)航API，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

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

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

示例代碼wxml

<button bind:tap="gotoHome">跳轉(zhuǎn)到首頁(yè)</button>

js代碼如下

 gotoHome(){
    wx.switchTab({
      url: '/pages/home/home',
    })
  },

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

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

wxml代碼如下

<button bind:tap="gotoinfo">跳轉(zhuǎn)到inofo頁(yè)面</button>

js文件如下

  gotoinfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

后退導(dǎo)航

調(diào)用wx.navigateBack(Object object)方法，可以返回上一夜或者多級(jí)頁(yè)面

<button bind:tap="backpage">返回上一級(jí)目錄</button>

js代碼如下

backpage(){
    wx.navigateBack({
      delta:1
    })
  },

編程導(dǎo)航穿參

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

<button bind:tap="gotoinfos">跳轉(zhuǎn)到info頁(yè)面并且穿參數(shù)</button>

js代碼如下

 gotoinfos(){
    wx.navigateTo({
      url: '/pages/info/info?name=ls7&gender=男',
    })
  },

在onload中接受導(dǎo)航傳參

通過(guò)聲明式導(dǎo)航傳參數(shù)或編程式導(dǎo)航穿慘所攜帶的參數(shù)，可以直接在onload事件中直接獲取到：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-860020.html

 onLoad(options) {
      console.log(options);
  },

到了這里，關(guān)于微信小程序：12.頁(yè)面導(dǎo)航的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！