微信小程序如何在頁面跳轉時進行頁面導航
1. 什麼是頁面導航
頁面導航指的是頁面之間的相互跳轉。例如，瀏覽器中實現頁面導航的方式有如下兩種：
① a鏈接
② location.href
2. 小程序中實現頁面導航的兩種方式
① 聲明式導航
⚫ 在頁面上聲明一個 <navigator> 導航組件
⚫ 通過點擊 <navigator> 組件實現頁面跳轉
② 編程式導航
⚫ 調用小程序的導航 API，實現頁面的跳轉
1.聲明式導航
1. 導航到 tabBar 頁面
tabBar 頁面指的是被配置為 tabBar 的頁面。
在使用 <navigator> 組件跳轉到指定的 tabBar 頁面時，需要指定 url 屬性和 open-type 屬性，其中：
⚫ url 表示要跳轉的頁面的地址，必須以 / 開頭
⚫ open-type 表示跳轉的方式，必須為 switchTab
示例代碼如下：
<!--pages/home/home.wxml--> <navigator url="/pages/message/message" open-type="switchTab">導航到消息頁面</navigator>
2. 導航到非 tabBar 頁面
非 tabBar 頁面指的是沒有被配置為 tabBar 的頁面。
在使用 <navigator> 組件跳轉到普通的非 tabBar 頁面時，則需要指定 url 屬性和 open-type 屬性，其中：
⚫ url 表示要跳轉的頁面的地址，必須以 / 開頭
⚫ open-type 表示跳轉的方式，必須為 navigate
示例代碼如下：
<!--pages/home/home.wxml--> <navigator url="/pages/info/info" open-type="navigate">導航到info頁面</navigator>
註意：為瞭簡便，在導航到非 tabBar 頁面時，open-type=“navigate” 屬性可以省略。
3. 後退導航
如果要後退到上一頁面或多級頁面，則需要指定 open-type 屬性和 delta 屬性，其中：
⚫ open-type 的值必須是 navigateBack，表示要進行後退導航
⚫ delta 的值必須是數字，表示要後退的層級
示例代碼如下：
<!--pages/info/info.wxml--> <navigator open-type="navigateBack" delta="1">後退（返回上一頁）</navigator>
註意：為瞭簡便，如果隻是後退到上一頁面，則可以省略 delta 屬性，因為其默認值就是 1
2.編程式導航
1. 導航到 tabBar 頁面
調用 wx.switchTab(Object object) 方法，可以跳轉到 tabBar 頁面。其中 Object 參數對象的屬性列表如下：
<!--pages/home/home.wxml-->
<button bindtap="gotoMessage">跳轉到消息頁面</button>
// pages/home/home.js
//通過編程式導航跳轉到tabbar頁面
gotoMessage(){
wx.switchTab({
url: '/pages/message/message',
})
}
2. 導航到非 tabBar 頁面
調用 wx.navigateTo(Object object) 方法，可以跳轉到非 tabBar 的頁面。其中 Object 參數對象的屬性列表
如下：
<!--pages/home/home.wxml-->
<button bindtap="gotoinfo">跳轉到info頁面</button>
// pages/home/home.js
//通過編程式導航跳轉到info頁面
gotoinfo(){
wx.navigateTo({
url:"/pages/info/info"
})
},
3. 後退導航
調用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級頁面。其中 Object 參數對象可選的
屬性列表如下：
<!--pages/info/info.wxml-->
<button bindtap="goback">後退</button>
// pages/info/info.js
goback(){
wx.navigateBack()
},
3.導航傳參
1. 聲明式導航傳參
navigator 組件的 url 屬性用來指定將要跳轉到的頁面的路徑。同時，路徑的後面還可以攜帶參數：
⚫ 參數與路徑之間使用 ? 分隔
⚫ 參數鍵與參數值用 = 相連
⚫ 不同參數用 & 分隔
代碼示例如下：
<!--pages/home/home.wxml--> <navigator url="/pages/info/info?name=zs&age=20">跳轉到info頁面</navigator>
2. 編程式導航傳參
調用 wx.navigateTo(Object object) 方法跳轉頁面時，也可以攜帶參數，代碼示例如下：
<!--pages/home/home.wxml-->
<view bindtap="gotoinfo">跳轉到info頁面</view>
//通過編程式導航跳轉到info頁面
gotoinfo(){
wx.navigateTo({
url:"/pages/info/info?name=zs&gender='男'"
})
},
3. 在 onLoad 中接收導航參數
通過聲明式導航傳參或編程式導航傳參所攜帶的參數，可以直接在 onLoad 事件中直接獲取到，示例代碼如下：
// pages/info/info.js
Page({
data: {
query:{}
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad(options) {
console.log(options);
this.setData({
query:options
})
},
總結
到此這篇關於微信小程序如何在頁面跳轉時進行頁面導航的文章就介紹到這瞭,更多相關小程序頁面跳轉進行頁面導航內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！