uniapp的几种页面跳转方式及场景

有时候面试的时候, 有的面试官看你uniapp有没有开发经验, 会问你几种跳转的方式, 用场景来引导你回答问题, 所以, 今天呢, 我也以每种场景的方式来写一下uniapp的几种页面跳转

1. uni.redirectTo(object)

比如: 我们登录过期了, 状态码为401, 需要跳转到登录页, 用哪种方式跳转呢?

我这以本地存储的方式模拟一下401

这时候, 我们需要认真的去分析, 既然登录过期了, 跳转到登录页, 我左滑是不是不能回到上一级了, 怎么才不会回到上一级呢? 是不是我们需要将上一级关闭掉就不会再返回上一级了, 并且我们的页面跳转的也不是tabbar页面

分析完毕之后, 我们去官方文档中查找答案

https://uniapp.dcloud.net.cn/api/router.html#redirectto

看到了redirectTo方法, 该方法的介绍正是, 关闭当前页面, 跳转到应用内非tabbar的页面, 和我们上述问题非常符合

2. uni.navigateTo(object)

在小程序中对于页面层级是有限制的

那肯定会有人问, 我们使用navigateTo页面层级超过十层会怎么办?

页面栈超过10层会将最后一层replace掉，假如你从第10层访问11层，会将10层栈抹去，11层替换为10层。这样在11层点返回，只能返回到第9层，原先被替换的第10层不被记录在路由栈了。

官方对于navigateTo的介绍就是保留当前页面, 跳转到应用内的非tabbar的任意页面

所以, 我们会使用navigateTo进行层级不高的页面跳转, 最后, 返回时配合uni.navigateBack使用, 比如我们的列表页, 跳转到详情页就是一个很好的例子

3. uni.reLaunch(object)

在官方介绍中, uni.reLaunch是关闭所有页面, 跳转到应用内的一个页面

该页面跳转的使用场景, 比如: 我们跳转了很多个页面, 现在想要去首页, 所以, 我们可以使用该方法去关闭所有的页面, 跳转到首页

4. uni.switchTab(object)

这个方法呢, 我们可以查看官方文档

https://uniapp.dcloud.net.cn/api/router.html#switchtab

介绍如下: 跳转到tabbar页面, 并关闭其他所有非tabbar页面, 基本用于tabbar的页面切换

我这里没有写tabbar页面, 用的自定义tabbar组件

uniapp如何自定义底部tabbar

今天, 我们就讲解到这里

我们下期见