uni-app 页面 路由navigate
uni-app
是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
公司最近在写APP应用到了uni-app 我在写的时候发现了一些路由跳转的问题 。 先说一下关于路由的各个接口把,各参数参数说明详见官网https://uniapp.dcloud.io/api/router?id=navigateto
1.uni.navigateTo(OBJECT) 保留当前的页面跳转到应用内的某个页面,使用uni.navigateBack 可以返回到原页面
通过参数URL进行跳转 如果是跳转非tabBar页面的路径,路径后面是可以携带参数的,参数与路径之间使用?分隔参数建与参数值用=相连,不同参数用&分隔,,,,传递后的参数可以在目标页面的onload函数可得到传递的参数
toSuccessBuy() { uni.navigateTo({ url: '/pages/buytest/SuccessBuy' //跳转到pages下buytest文件下面的SuccessBuy.vue文件 }) }
但是要注意:目标页面必须是在pages.json里面注册的vue页面,如果要是想打开web url,在app平台可以使用plus.runtime.openURL或web-view组件
不能在APP.vue里面进行跳转
跳转到tabBar的时候不能使用uni.navigateTo进行跳转,只能使用switchTab进行跳转
2. uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面。(不可以使用uni.navigateBack返回,使用uni.redirectTo时当前页面已经被关闭,无法返回,但是可以返回到当前页面的上一个页面 )
toThree(){ 上一级页面 One.vue uni.redirectTo({ 当前页面 Two.vue url:'/pages/buytest/Three' 目标页面 Three.vue }) 从当前Two跳转到目标页面Three,Two页面使用uni.redirect关闭当前Two页面并跳转到Three,Three返回时Two页面已经关闭,返回到One页面 }
3.uni.reLaunch(OBJECT) 关闭所有页面,打开到应用的某个页面 (他与uni.navigateTo 的区别就是,uni.reLaunch关闭所有页面进入新的页面 ,uni.navigateTo是保留当前页面并跳入最新页面 ,)
toBuyTestOne(){ uni.reLaunchTo({ url:'/pages/buytest/BuyTestOne' }) },
4.uni.switchTab(OBJECT) 跳转到tabBar页面,并关闭其他所有非tabBar页面 (设置url路径时,需要跳转的tabBar页面的路径必须是在pages.json的tabBar字段定义的页面,并且!!!路径的后面不可以携带参数)
//pages.json { "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" },{ "pagePath": "pages/other/other", "text": "其他" }] } }
//other.vue uni.switchTab({ url: '/pages/index/index' });
5. uni.navigateBack(OBJECT) 关闭当前页面,返回上一级或者多级页面。可通过getCurrentPages()获取当前的页面栈,决定返回几层
重点来咯!!!
我在做这个页面返回的时候就遇到了一个几乎接近于死循环的问题,我用uni.navigateTo跳转到下一个页面A->B->C->A这样连续跳转五六次以后,想在跳到A页面的时候直接退出到别的页面,但是使用uni.navigateBack返回时,会连续反方向返回五六次,简而言之就是怎么来的怎么回去,但是发现根本达不到自己想要的效果,若是使用uni.navigateTo定向跳转的时候,会发现返回的时候是一样的,返回的上一个页面,甚至于更啰嗦,后来我仔细翻了翻文档,发现了多级返回这个东东,但是由于客户的不断点击,自己并不知道客户到底点击了多少层,以至于我就又发现了getCurrentPages()这个法宝,它是用来获取到当前页面的页面栈,而你想要回到第几层页面时,用获取到的页面栈的层数减去想回到的第几层就可以了,上代码
back() { let pages = getCurrentPages(); // 获取当前页面栈层数 例如16 let backPages = pages.length - 1; // 当前层数减一获取要跳转的页面的层数 15 uni.navigateBack({ delta: backPages //跳转十五层 回到第一层页面 }) } ,
参数delta :类型为number 指的是返回的页面数,如果delta大于现有的页面数,会直接返回首页的
这个是限于你的返回按钮是自己定义的那种,如果你选择了uni-app默认的返回,请加上onBackPress()生命周期函数,用来对返回页面进行监听
这样就可以达到效果了,想返回几层就返回几层,想跳转到哪个页面就跳到到哪个页面,诶~,妈妈再也不用担心我跳不过去了~~~
最后 请注意!
1.navigateTo,redirectTo 只能打开非tabBar页面
2.switchTab 只能打开tabBar页面
3.reLaunch 可以打开任意页面