uniapp如何跳转后返回不刷新

WBOY

发布时间：2023-05-26 09:20:07

557人浏览过

来源于php中文网

原创

前言

Uniapp作为一个跨平台的开发框架，已经被越来越多的开发者所接受和使用。在Uniapp中，页面跳转是非常常见的操作，在进行页面跳转后，有时候需要保留原页面的状态，以便下一次回到这个页面时不需要重新加载数据，也不需要重新进行一些复杂的操作。那么，如何在Uniapp中实现跳转后返回不刷新的效果呢？本文将为大家详细介绍。

Uniapp页面跳转

在Uniapp中进行页面跳转，我们通常使用uni.navigateTo或uni.redirectTo方法，它们的具体区别如下：

uni.navigateTo

使用uni.navigateTo方法进行页面跳转时，会在当前页面的栈顶添加一个新的页面，这个新的页面会覆盖掉当前页面的一部分，如下图所示：

可以看到，我们在A页面中使用uni.navigateTo跳转到了B页面，在B页面中添加了一个新的内容，这个内容会出现在A页面的上面，并且当我们返回到A页面时，B页面会被销毁，整个过程就像一个栈结构一样。

uni.redirectTo

与uni.navigateTo不同的是，使用uni.redirectTo进行页面跳转时，会将当前页面删掉，然后跳转到一个新的页面，如下图所示：

可以看到，我们在A页面中使用uni.redirectTo跳转到了B页面，在B页面中添加了一个新的内容，但是当我们返回到A页面时，B页面已经被销毁了，整个过程就像一个队列一样。

如何实现跳转后返回不刷新

通过上面的介绍，我们可以知道，当我们需要跳转后返回不刷新的效果时，不能直接使用uni.navigateTo或uni.redirectTo方法，因为这两个方法都会销毁跳转前的页面。那么，该如何实现呢？

Replit Agent

Replit最新推出的AI编程工具，可以帮助用户从零开始自动构建应用程序。

下载

实现思路：

通过uni.switchTab或uni.reLaunch方法前往指定页面，这两个方法都有一个特点，就是无论怎么跳转，都会刷新页面，所以要注意在这里不能使用uni.navigateTo或uni.redirectTo方法。

在需要跳转的页面中添加一个tabBar选项卡，这个选项卡的路由地址要与uni.switchTab或uni.reLaunch前往的页面路由地址相同，这样，当我们点击这个选项卡时，就会跳转到指定页面，并且保留跳转前的页面状态。

实现步骤：

在manifest.json文件中添加tabBar选项卡

"tabBar": {
  "color": "#999",
  "selectedColor": "#007AFF",
  "borderStyle": "black",
  "backgroundColor": "#FFFFFF",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/img/tabBar/home.png",
      "selectedIconPath": "static/img/tabBar/home-selected.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "static/img/tabBar/mine.png",
      "selectedIconPath": "static/img/tabBar/mine-selected.png"
    }
  ]
},

在manifest.json文件中添加了tabBar选项卡，其中包含两个页面，分别是首页和我的页面。