uni-app 页面路由navigate

夜晚的太阳 發表於 2019-5-17 17:45:00

uni-app  页面路由navigate
<code>uni-app</code> 是一个使用 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函数可得到传递的参数
　　
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">toSuccessBuy() {
　　uni.navigateTo({
url: '/pages/buytest/SuccessBuy' //跳转到pages下buytest文件下面的SuccessBuy.vue文件
　　})
}
</pre>
</div>
　　但是要注意：目标页面必须是在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时当前页面已经被关闭，无法返回，但是可以返回到当前页面的上一个页面 ）
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">toThree(){ 上一级页面 One.vue
uni.redirectTo({　　　　　　　　　　　　　　　　　　　当前页面Two.vue
url:'/pages/buytest/Three'　　　　　　　　　　　目标页面Three.vue
})　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　从当前Two跳转到目标页面Three，Two页面使用uni.redirect关闭当前Two页面并跳转到Three，Three返回时Two页面已经关闭，返回到One页面
}
</pre>
</div>
 
3.uni.reLaunch(OBJECT) 关闭所有页面，打开到应用的某个页面　 （他与uni.navigateTo 的区别就是，uni.reLaunch关闭所有页面进入新的页面，uni.navigateTo是保留当前页面并跳入最新页面，）
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">toBuyTestOne(){
　　uni.reLaunchTo({
　　　　url:'/pages/buytest/BuyTestOne'
　　})
},
</pre>
</div>
4.uni.switchTab(OBJECT)  跳转到tabBar页面，并关闭其他所有非tabBar页面     （设置url路径时，需要跳转的tabBar页面的路径必须是在pages.json的tabBar字段定义的页面，并且！！！路径的后面不可以携带参数）
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">//pages.json
{
"tabBar": {
"list": [{
 "pagePath": "pages/index/index",
 "text": "首页"
},{
 "pagePath": "pages/other/other",
 "text": "其他"
}]
}
}
</pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">//other.vue
uni.switchTab({
url: '/pages/index/index'
});
</pre>
</div>
5.　uni.navigateBack(OBJECT)  关闭当前页面，返回上一级或者多级页面。可通过getCurrentPages（）获取当前的页面栈，决定返回几层
　　重点来咯！！！ 
　　我在做这个页面返回的时候就遇到了一个几乎接近于死循环的问题，我用uni.navigateTo跳转到下一个页面A->B->C->A这样连续跳转五六次以后，想在跳到A页面的时候直接退出到别的页面，但是使用uni.navigateBack返回时，会连续反方向返回五六次，简而言之就是怎么来的怎么回去，但是发现根本达不到自己想要的效果，若是使用uni.navigateTo定向跳转的时候，会发现返回的时候是一样的，返回的上一个页面，甚至于更啰嗦，后来我仔细翻了翻文档，发现了多级返回这个东东，但是由于客户的不断点击，自己并不知道客户到底点击了多少层，以至于我就又发现了getCurrentPages()这个法宝，它是用来获取到当前页面的页面栈，而你想要回到第几层页面时，用获取到的页面栈的层数减去想回到的第几层就可以了，上代码
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">back() {
let pages = getCurrentPages(); // 获取当前页面栈层数例如16
let backPages = pages.length - 1;// 当前层数减一获取要跳转的页面的层数 15
 uni.navigateBack（{
 delta: backPages //跳转十五层回到第一层页面
 }）
} ,
</pre>
</div>
　　参数delta ：类型为number 指的是返回的页面数，如果delta大于现有的页面数，会直接返回首页的
　　这个是限于你的返回按钮是自己定义的那种，如果你选择了uni-app默认的返回，请加上onBackPress()生命周期函数，用来对返回页面进行监听
　　这样就可以达到效果了，想返回几层就返回几层，想跳转到哪个页面就跳到到哪个页面，诶~,妈妈再也不用担心我跳不过去了~~~
 
        最后   请注意！
　　　　1.navigateTo,redirectTo 只能打开非tabBar页面
　　　　2.switchTab 只能打开tabBar页面
　　　　3.reLaunch 可以打开任意页面
　　　　 
来源：https://www.cnblogs.com/gongliying/p/10882744.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 页面 路由navigate

uni-app 页面路由navigate