1. uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
uni.navigateTo({
url:'./home/index'
});
注意: 页面跳转路径有层级限制,不能无限制跳转新页面跳转到 tabBar 页面只能使用 switchTab
跳转路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web
url,具体可参考【uniapp官方-路由与页面跳转】
带参方式(为啥使用encodeURlComponent加密)
uni.navigateTo({
url: `/pages-ppc/plan-intention-report/detail/index?info=${encodeURIComponent(
JSON.stringify(row),
)}`,
});
2. uni.navigateBack(关闭当前页面,返回上一页面或多级页面)
// 在第3级页面内 navigateBack,将返回第一层页面
uni.navigateBack({
delta: 2
});
注意: 可通过 getCurrentPages()方法 获取当前的页面栈,决定需要返回几层。
常用参数delta,默认为1,含义是:返回的页面数,如果 delta 大于现有页面数,则返回到首页。
3. redirectTo(关闭当前页面,跳转到其他页面)
uni.redirectTo({
url:'./home/index'
})
注意: 需要跳转的应用内非 tabBar
的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如
‘path?key=value&key2=value2’ 转到 tabBar 页面只能使用 switchTab 跳转
4. reLaunch(关闭所有页面,跳转到其他页面)
uni.reLaunch({
url:'./home/index'
})
注意: 需要跳转的应用内页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如
‘path?key=value&key2=value2’ 转到 tabBar 页面则不能带参数
H5端调用uni.reLaunch之后之前页面栈会销毁,但是无法清空浏览器之前的历史记录,此时navigateBack不能返回,如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。
如果调用了 uni.preloadPage() 不会关闭,仅触发生命周期 onHide
5. switchTab(适用于底部导航栏之间的跳转,或者跳转到底部导航栏(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。))
uni.switchTab({
url: './home/index'
});
注意: 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
总结一下
navigateTo,redirectTo只能打开非tabBar页面(例如列表到详情)
switchTab只能打开tabBar页面(tabBar之间的传参等)
reLaunch可以打开任意页面
页面底部的tabBar由页面决定,就是只要时定义为tabBar的页面,底部都有tabBar,不能再App.vue里面进行页面跳转
uni.navigateTo({
url:'跳转的路径?id=xxx&alue=xxx',
})
传递的参数在跳转到的页面可以在onLoad:function(option){
option就是传递的参数
}
需要跳转的应用内非tabBar的页面,其实就是在pages.json里面配置的页面都不能跳转详情请看官网uni-app路由跳转
注意: 1:页面跳转路径有层级限制,不能无限制跳转新页面 2:跳转到 tabBar 页面只能使用 switchTab 跳转
uni.redirectTo({
url:'跳转的路径'
需要跳转的应用内非tabBar的页面的路径,
})
注意是关闭当前页面,跳转到应用内的某个页面,跳转到 tabBar 页面只能使用 switchTab 跳转
uni.reLaunch({
url: 'test?id=1'
});
关闭所有页面,打开到应用内的某个页面。如果跳转的页面路径是 tabBar 页面则不能带参数。
uni.switchTab({
url: '/pages/index/index'
需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
});
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
// 此处是A页面
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
url: 'C?id=1'
});
// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
delta: 2
});
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。