小程序uni.navigateTo频繁使用存在问题及解决方案 ---uniapp开发实战

问题描述：
一开始使用uni.navigateTo进行页面的跳转感觉挺爽，看一下uniapp的文档复制过来修改个跳转路径就ok，但最近在开发小程序中发现频繁使用uni.navigateTo进行页面来回多次跳转，点击几次后发现点击没反应了，查了原因发现uni.navigateTo是页面路由缓存页面，而uni.navigateTo来回跳转最多缓存的页面数量是9个，超过这个数量只能重新刷新页面了，不然点击没反应。很多博客上有的博主推荐使用uni.redirectTo替换uni.navigateTo频繁跳转的问题，但是解决不了根本，因为我发现在使用这个uni.redirectTo来回频繁跳转也出现别的问题，因此我的解决办法是：在返回下单支付页面时使用uni.navigateBack来替换uni.navigateTo，跳转的到地址列表的时候还是使用uni.navigateTo，因为我的业务场景需要返回多级页面。

简单了uniapp的跳转方式的区分和作用：

**方式一、uni.navigateTo** 
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
**方式二、uni.redirectTo(OBJECT)**
关闭当前页面，跳转到应用内的某个页面。
**方式三、uni.navigateBack**
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
**方式四、uni.switchTab(OBJECT)**
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
**方式五、uni.reLaunch(OBJECT)**
关闭所有页面，打开到应用内的某个页面。

业务场景：
下单支付页面有个切换地址选项，点击可以跳转到我的地址管理页面，这个地址管理列表页可以提供重新新建地址或者编辑地址。地址管理页面是个列表展示页，有地址列表展示、编辑、新建地址的功能，新建完成并保存地址可以重新跳转到下单支付页，而编辑完成的地址回到地址列表页，继续点击列表页对应地址选项可以重新回到下单支付页。

问题解决代码案例：

下单支付页面：
my-orders

export default {
	  //在页面显示的时候获取到选中地址返回来的数据
	onShow() {
    const currentPages = getCurrentPages();
    const { myNewAddressData } = currentPages[currentPages.length - 1].data;
  	//得到新的地址信息 myNewAddressData---自定义的名称，在下面地址可以看到携带数据名称的设置
  	console.log(JSON.parse(myNewAddressData))
  },
  methods: {
   //切换地址-跳转到地址列表页
    myAddress() {
      uni.navigateTo({
        url: "/app/address-list",
      });
    }
  	  }
   }

address-list页面：
描述：如果从下单支付页进来直接选中已经存在的地址 那么直接返回上一级页面，那就是单级页面返回，路由缓存【my-orders，address-list】。但是如果先选择编辑，然后编辑完成在选中任意一个地址返回下单支付，那就不是直接返回上一级页面了，那相当于返回指定的某一层的多级页面，路由缓存【my-orders，address-list，address-edit】。我个人处理如下

	//点击列表页其中一个地址返回 地址的数据 infoData是个{}
	getAddressInfo(infoData) {
		//获取路由
	    const currentPages = getCurrentPages();
	    if (
	      currentPages[this.prePagesRoute].route ===
	      "app/my-orders"
	    ) {
	     //返回页面携带数据设置
	      currentPages[this.prePagesRoute].setData({
	        myNewAddressData: JSON.stringify(infoData),
	      });
	      //返回my-orders页面
	      uni.navigateBack({
	        delta: currentPages.length - 1 - this.prePagesRoute,
	      });
	    }
	  },

address-add页面(新建地址页)：
描述：从下单支付页面跳转过来之后，点击新建地址，新建完成地址，然后保存直接跳转回到下单支付页，路由缓存【my-orders，address-list，address-add】，相当于也是多级页面的跳转，我个人处理如下：

 //返回下单支付页处理
    getAddressInfo(infoData) {
    //获取路由
      const currentPages = getCurrentPages();
      let prePagesRoute = null;
      currentPages.map((item, index) => {
        if (item.route === "app/my-orders") {
          prePagesRoute = index;
        }
      });
      if (prePagesRoute !== null) {
        if (
          currentPages[prePagesRoute].route ===
          "app/my-orders"
        ) {
          //设置一下给下单支付页携带的数据
          currentPages[prePagesRoute].setData({
            myNewAddressData: JSON.stringify(infoData),
          });
          //返回下单支付页
          uni.navigateBack({
          	//currentPages.length - 1 - prePagesRoute 安照 delta值的规则 计算一下下单支付页的路由位置
            delta: currentPages.length - 1 - prePagesRoute,
          });
        }
      } else {
        //非下单支付页路径进来的 返回上一页
        uni.navigateBack({
          delta: 1,
        });
      }
    },