总结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

Uni-app页面路由区分注意事项的更多相关文章

  1. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  2. 微信小程序之页面路由(九)

    [未经允许,请勿以任何形式转载] 什么是路由? 我们通常理解的路由指分组数据包从源到目的地时,决定端到端路径的网络范围的进程: 借用上面的定义,我们可以理解小程序页面路由,根据路由规则(路径)从一个页 ...

  3. 微信小程序之页面路由

    路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面   onLoad, onSHow 打开新页面 调用 API w ...

  4. AngularJS ui-router刷新子页面路由

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...

  5. 教你判断一个APP页面是原生的还是H5页面 。(还没看)

    来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...

  6. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  7. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  8. App页面显示优化

    在开发移动端APP页面时,对各操作系统各种型号的手机进行适配是必须的.然鹅,上周在开发完一个落地页后,被测试给打了回来,其中列出了一个在我看来很小的问题:单击进入页面的时候,页面还没加载完的时候字体显 ...

  9. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

随机推荐

  1. CUDA优化

    cuda程序优化 一:程序优化概述 1:精度 在关键步骤使用双精度,其他步骤使用单精度,以获得指令吞吐量和精度的平衡. 2:延迟 先缓冲一定量数据,在交给GPU计算.可以获得较高的数据吞吐量. 3:计 ...

  2. STM32F429时钟不正确导致串口无法正确收发

    老早之前自己做了块F4的板子,设计原理图时没有去找官方参考,看了手册后就开工了,做完板子回来测试串口发现PC端接收到的都是乱码,尝试了几种波特率也没能正确接收,串口的代码是官方参考例程的,不应该有问题 ...

  3. HDU-3033 I love sneakers! 题解

    题目大意 有 n 个物品,分成了 k 组,每个物品有体积和价值,把 n 个物品放到容量为 V 的背包中,保证每组至少放一件,求能获得的最大价值,如果不能实现,输出"Impossible&qu ...

  4. SwiftUI - iOS10本地推送通知教程UserNotifications在Swift中的实现方式

    简介 消息推送相信在很多人的眼里都不陌生了吧?像即时聊天微信,好友发信息给你时会在顶部弹下小窗口提醒你.也像是在影院APP预订了电影票,在开场前一小时你也会收到提醒.这类推送是需要经过后端发送请求的, ...

  5. String 的格式化

    使用场景 用于生成redis等key-value 结构的key的格式化,方便管理 eg: String.format(RedisKeys.PURCHASE_ADD_BABY_LOCK,form.get ...

  6. APP自动化1——Appium+pycharm自动化环境搭建全流程

    1. 安装python3,pycharm,可参考之前写的文档:https://www.cnblogs.com/chenweitoag/p/13154815.html 2. 准备以下必要工具: 基于wi ...

  7. cb51a_c++_STL_算法_根据第n个元素排序nth_element

    cb51a_c++_STL_算法_根据第n个元素排序nth_elementnth_element(b,n,e),比如最大的5个数排序,或者最小的几个数nth_element(b,n,e,p)对比:pa ...

  8. 13.实战交付一套dubbo微服务到k8s集群(6)之交付dubbo服务的消费者集群到K8S

    构建dubbo-demo-consumer,可以使用和dubbo-demo-service的流水线来构建 1.登录jenkins构建dubbo-demo-consumer  2.填写构建dubbo-d ...

  9. 008.OpenShift Metric应用

    一 METRICS子系统组件 1.1 metric架构介绍 OpenShift metric子系统支持捕获和长期存储OpenShift集群的性能度量,收集节点以及节点中运行的所有容器的指标. metr ...

  10. 【Java】HashMap实现原理---数据结构

    作为一个程序猿,特别是Java后端的,应该全部人都用过HashMap,也都知道HaspMap是一个用于存储Key-Value键值对的集合.与此同时我们把每一个键值对也叫做 Entry. 而这些Entr ...