Uni-app页面路由区分注意事项

总结Tips:

 (1)navigateTo,redirectTo 只能打开非 tabBar页面

 (2)switchTab只能打开 TabBar 页面

 (3)reLaunch可以打开任意界面

 (4)页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有tabBar

 (5)不能在 App.vue 里面进行页面跳转

uni.navigateTo( OBJECT) —— 保留当前页面,跳转到应用内的某个页面,使用  uni.navigateBack  可以返回到原来页面

ONJECT参数说明:

参数 类型 必填 默认值 说明 平台差异说明
url String  

需要跳转的应用内非tabBar的页面路径,路径后可以带参数,。参数与路径之间使用 ? 分隔,参数键与参数值用 = 连接,不同的参数用 & 分隔;

例如:' path?key=value&key2=value2 ',path为跳转的目标页面路径,目标页面的onLoad函数可以得到传递的参数

 
animationType String pop-in 窗口现实的动画效果 5+APP
animationDuration Number 300 窗口动画持续时间,单位为ms 5+APP
success Function   接口调用成功的回调函数  
fail Function   接口调用失败的回调函数  
complete Function   接口调用结束的回调函数(成功、失败都会执行)  

 

注意:

  页面跳转路径有层级限制,不能无限跳转新页面

  跳转到 tabBar 页面只能使用 switchTab 跳转

  不能在 App.vue 文件里进行页面跳转

  路由API的目标页面必须是在 pages.json 里注册的vue页面。如果想打开 web url,在APP平台可以使用   plus.runtime.openURL  或 web-view组件;H5平台使用 window.open ;小程序平台使用web-view组件(url需在小程序的联网白名单里)。

uni.redirectTo( OBJECT )——关闭当前页面,跳转到应用内的某个页面

OBJECT参数说明

参数 类型 必填 说明
url String

需要跳转的应用内非tabBar的页面路径,路径后可以带参数,。参数与路径之间使用 ? 分隔,参数键与参数值用 = 连接,不同的参数用 & 分隔;

例如:' path?key=value&key2=value2 '

success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(成功、失败都会执行)

 

uni.reLaunch( OBJECT )——关闭所有页面,打开到应用内的某个页面

OBJECT参数说明

参数 类型 必填 说明
url String

需要跳转的应用内非tabBar的页面路径,路径后可以带参数,。参数与路径之间使用 ? 分隔,参数键与参数值用 = 连接,不同的参数用 & 分隔;

例如:' path?key=value&key2=value2 ',如果跳转的页面是tabBar页面则不能带参数

success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用完成的回调函数(成功、失败都会调用)

uni.switchTab(OBJECT)——跳转到 tabBar页面,并关闭其他所有非 tabBar 页面

OBJECT参数说明

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
fail Function 接口调用完成的回调函数(成功、失败都会调用)

uni.navigateBack(OBJECT)——关闭当前页面,返回上一级或多级页面,可通过 getCurrentPages( ) 获取当前页面栈,决定需要返回几层

OBJECT参数说明

参数 类型 必填 默认值 说明 平台差异说明
delta Number 1 返回的页面数,如果delta大于现有页面数,则返回到首页  
animationType String pop-out 窗口关闭的动画效果 5+APP

animationDuration

Number 300 窗口关闭动画的持续时间,单位为 ms 5+APP
上一篇:javascript – 如何在同一个屏幕中更改视图(React Native)?


下一篇:mint ui的tabBar监听路由变化实现tabBar切换