路由导航
目录1. 声明式路由导航
navigator标签被用于声明式路由导航
- url表示要跳转的页面地址,必须以
/
开头 - open-type表示跳转的方式,如果跳转的页面为tabBar页面,该属性必须为
switchTab
<navigator url="/pages/info/info">导航到info页面</navigator>
<navigator url="/pages/message/message" open-type="switchTab">
导航到消息页面
</navigator>
1.1 声明式后退导航
如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性
- open-type的值必须是
navigateBack
,表示要进行后退导航 - delta的值必须是数字,表示要后退的页面数
<navigator open-type="navigateBack" delta="1">后退</navigator>
1.2 声明式导航传参
navigator组件的url属性末尾可以携带参数:
- 参数和路径之间使用
?
分隔 - 参数键和参数值用
=
相连 - 不同参数用
&
分隔
<navigator url="/pages/info/info?name=zs&age=20">跳转到info界面</navigator>
传递参数后,可以使用onLoad函数的option
参数获取与调用参数
onLoad: function (options){
console.log(options)
}
2. 编程式路由导航
调用wx.switchTab(Object object)
方法,可以跳转到tabBar页面
调用wx.navigateTo(Object object)
方法,可以跳转到非tabBar页面s
其中Object参数对象可选的属性列表如下:
属性 | 说明 |
---|---|
url | 需要跳转的tabBar页面的路径,路径后不能带参数 |
success | 接口调用成功的回调函数 |
fail | 接口调用失败的回调函数 |
complete | 接口调用结束的回调函数(无论调用结果如何都会执行) |
-
示例代码
- WXML
<button bind:tap="gotoMessage">跳转到消息页面</button>
- JS
//导航到tabBar页面 gotoMessage(){ wx.switchTab({ url:'/pages/message/message' }) } //导航到非tabBar页面 gotoInfo(){ wx.navigateTo({ url:'/pages/info/info' }) }
2.1 编程式后退导航
如果要后退到上一页面或多级页面,需要调用wx.navigateBack(Object object)
方法,可以返回上一页面或多级页面。
其中Object参数对象可选的属性列表如下:
属性 | 说明 |
---|---|
delta | 后退的页面数,如delta大于现有页面数,则返回到首页 |
success | 接口调用成功的回调函数 |
fail | 接口调用失败的回调函数 |
complete | 接口调用结束的回调函数(无论调用结果如何都会执行) |
-
示例代码
- WXML
<button bind:tap="gotoBack">后退</button>
- JS
goBack(){ wx.navigateBack({ wx.navigateBack() }) }
2.3 编程式导航传参
调用wx.navigateTo(Object object)
方法跳转页面时,也可以携带参数
gotoInfo(){
wx.navigateTo({
url:'/pages/info/info?name=ls&gender=男'
})
}
获取、调用参数的方法与声明式导航一致
标签:调用,微信,程序开发,跳转,wx,导航,路由,页面 From: https://www.cnblogs.com/Solitary-Rhyme/p/16940243.html