导航：导航指的是页面之间的互相跳转
tabBar 页面：被配置为 tabBar的页面
声明式导航
实现：在页面上声明一个 <navigator> 导航组件，通过点击 <navigator> 组件实现页面跳转
导航到 tabBar 页面
在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定的 url 属性和 open-type 属性
注：
- url 表示要跳转到页面的地址，必须以 “/” 开头，以页面名称为结尾（没有后缀）
- open-type 表示跳转的方式，必须为 switchTab
<navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator>导航到非 tabBar 页面
在使用 <navigator> 组件跳转到指定的非 tabBar 页面时，需要指定的 url 属性和 open-type 属性
注：
- url 表示要跳转到页面的地址，必须以 “/” 开头，以页面名称为结尾（没有后缀）
- open-type 表示跳转的方式，必须为 navigate
<navigator url="/pages/main/main" open-type="navigate">跳转到主页</navigator>后退导航
后退到上一页或多级页面时，则需要指定 open-type 属性和 delta 属性
- open-type 表示要进行后退导航（值必须是 navigateBack ）
- delta 表示要后退的层级（值为整数）
<navigator open-type="navigateBack" delta="1">返回上一层</navigator>编程式导航
实现：通过触摸事件，调用小程序的导航 API，实现页面的跳转
导航到 tabBar 页面
在事件中调用 wx..switchTab(Object object) 或 wx.reLaunch(Object object) 方法，可以跳转到 tabBar 页面
object 的参数 （注：url 属性是必填）
- url 需要跳转的 tabBar 页面的路径（switchTab 方法路径中不能带参数）
- success 接口调用成功的回调函数
- fail 接口调用失败的回调函数
- complete 接口调用结束的回调函数（一定会执行的函数）
// 页面
<button bind:tap="gohome" type="primary">跳转首页</button>
// 触摸事件方法
gohome() {
wx.switchTab({
url: '../home/home',
success: () => {
console.log("跳转成功");
},
fail: () => {
console.log("跳转失败");
},
complete: () => {
console.log("执行");
}
})
}导航到非 tabBar 页面
在事件中调用 wx..navigateTo(Object object) 方法，可以跳转到非 tabBar 页面
object 的参数 （注：url 属性是必填）
- url 需要跳转的 tabBar 页面的路径
- success 接口调用成功的回调函数
- fail 接口调用失败的回调函数
- complete 接口调用结束的回调函数（一定会执行的函数）
// 页面
<button bind:tap="gomain" type="primary">跳转主页</button>
// 触摸事件方法
gomain() {
wx.navigateTo({
url: '../main/main',
success: () => {
console.log("跳转成功");
},
fail: () => {
console.log("跳转失败");
},
complete: () => {
console.log("执行");
}
})
},后退导航
在事件中调用 wx.navigateBack(Object object) 方法，可以返回上一页或多级页面
object 的参数
- delta 返回的页面数，如果 delta 大于现有页面数，则返回到首页
- success 接口调用成功的回调函数
- fail 接口调用失败的回调函数
- complete 接口调用结束的回调函数（一定会执行的函数）
// 页面
<button bind:tap="goback" type="primary">返回上一层</button>
// 触摸事件方法
goback() {
wx.navigateBack({
delta:1,
success: () => {
console.log("后退成功");
},
fail: () => {
console.log("后退失败");
},
complete: () => {
console.log("执行");
}
});
},导航的传参
声明式导航传参
在路径的后面直接携带参数
- 参数与路径之间用 “?” 分隔
- 参数名与参数值用 “=” 相连
- 不同的参数用 “&” 分隔
注：open-type 属性值为 switchTab 不能传参
<navigator url="../main/main?id=1&name='张三'" open-type="navigate">跳转到主页</navigator>编程式导航传参
在事件中调用 wx..navigateTo(Object object) 或 wx.reLaunch(Object object) 方法跳转页面时，可以在路径中携带参数
注：reLaunch 方法可以给 tabBar 页面传参，也可以给 非 tabBar 页面传参文章来源：https://www.toymoban.com/news/detail-795376.html
// 页面
<button bind:tap="gohome" type="primary">跳转tabBar页</button>
<button bind:tap="gomain" type="primary">跳转非tabBar页</button>
hohome() {
wx.reLaunch({
url: '../home/home?id=1&name="张三"',
success: () => {
console.log("跳转成功");
},
fail: () => {
console.log("跳转失败");
},
complete: () => {
console.log("执行");
}
})
},
gomain() {
wx.navigateTo({
url: '../main/main?id=1&name="张三"',
success: () => {
console.log("跳转成功");
},
fail: () => {
console.log("跳转失败");
},
complete: () => {
console.log("执行");
}
})
}接收导航参数
通过声明式导航传参或编程式传参所携带的参数，可以在 onLoad 函数中直接获取到数据文章来源地址https://www.toymoban.com/news/detail-795376.html
onLoad(options) {
console.log("主页接收参数", options);
},到了这里，关于微信小程序之导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
