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 | 
Uni-app页面路由区分注意事项的更多相关文章
- uni app 零基础小白到项目实战-1
		
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
 - 微信小程序之页面路由(九)
		
[未经允许,请勿以任何形式转载] 什么是路由? 我们通常理解的路由指分组数据包从源到目的地时,决定端到端路径的网络范围的进程: 借用上面的定义,我们可以理解小程序页面路由,根据路由规则(路径)从一个页 ...
 - 微信小程序之页面路由
		
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
 - AngularJS ui-router刷新子页面路由
		
网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...
 - 教你判断一个APP页面是原生的还是H5页面 。(还没看)
		
来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...
 - uni app中使用自定义图标库
		
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
 - 从微信小程序到鸿蒙js开发【11】——页面路由
		
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
 - App页面显示优化
		
在开发移动端APP页面时,对各操作系统各种型号的手机进行适配是必须的.然鹅,上周在开发完一个落地页后,被测试给打了回来,其中列出了一个在我看来很小的问题:单击进入页面的时候,页面还没加载完的时候字体显 ...
 - ios&h5混合开发项目仿app页面跳转优化
		
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
 
随机推荐
- 基于EntityFramework 6 Code First实现动态建库,分库,数据库自动迁移
			
一.前言 公司原本有一个"xx系统",ORM使用EntityFramework,Code First模式.该系统是针对某个客户企业的,现要求该系统支持多个企业使用,但是又不能给每个 ...
 - ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
			
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...
 - Nginx源码编译安装选项
			
[Nginx源码编译过程] make是用来编译的,它从Makefile中读取指令,然后编译. make install是用来安装的,它也从Makefile中读取指令,安装到指定的位置. configu ...
 - 【Vulnhub】FristiLeaks v1.3
			
靶机信息 下载连接 https://download.vulnhub.com/fristileaks/FristiLeaks_1.3.ova.torrent https://download.vuln ...
 - ojdbc6中OraclePreparedStatement的ArrayIndexOutOfBoundsException异常BUG-6396242
			
现场信息 Caused by: java.lang.ArrayIndexOutOfBoundsException: -32203 at oracle.jdbc.driver.OraclePrepare ...
 - LeetCode 78,面试常用小技巧,通过二进制获得所有子集
			
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第47篇文章,我们一起来看下LeetCode的第78题Subsets(子集). 这题的官方难度是Medium,点赞 ...
 - tp6 路由匹配参数获取问题
			
tp6是一个封装度很高的框架,在大部分场景下都能做到开箱即用 本次遇到情况为,当请求消息体为索引数组时,路由参数无法正常获取 首先看正常路由匹配 路由定义 Route::post('test/:a/: ...
 - 十万同时在线用户,需要多少内存?——Newbe.Claptrap 框架水平扩展实验
			
Newbe.Claptrap 项目是笔者正在构建以反应式.Actor模式和事件溯源为理论基础的一套服务端开发框架.本篇我们将来了解一下框架在水平扩展方面的能力. 前情提要 时隔许久,今日我们再次见面. ...
 - 警告Establishing SSL connection without server's identity verification is not recommended
			
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] SpringBo ...
 - Skywalking的存储配置与调优
			
https://blog.csdn.net/smooth00/article/details/96479544 作为一款APM和全链路监控平台,Skywalking算是挺出色的.Skywalking是 ...