微信小程序5层路由限制，踩坑笔记

最近的项目在做微信小程序。然后被提了一个很奇怪的单，当用户在界面内多次跳转，跳转一定次数后，路由跳转会失效。 我们项目中使用了mpvue，路由跳转用的是vue-router，也没看到报错什么的。经过查阅相关资料之后发现，小程序的history栈有限制，限制在5层。之后如果继续调用wx.navigateTo方法就会失效，this.$router.push底层就是调用的这个方法，而wx.redirectTo方法没有这个限制。

从文档里面可以看出wx.navigateTo是有一个失败回调的，所以解决方案就是。当histroy栈满了之后，调用wx.navigateTo会失败，那么在失败回调里面调用wx.redirectTo，重新跳转

wx.navigateTo({
    url: `http://yourUrl`,
    fail: (err) => {
      console.error(err)
      wx.redirectTo({
        url: `http://yourUrl`
      })
    }
})

这个解决有个缺陷，就是 a --> b; b --> c; c --> d; d --> e; e --> f; f --> g;此时如果在g页面点返回，返回的并不是f页面，而是e页面，因为e页面才是第4层。

还有另一种解决方案，wx.reLaunch这个api可以把之前的路由history直接清空，然后将目标路由设置为第一级路由历史纪录。

wx.navigateTo({
    url: `http://yourUrl`,
    fail: (err) => {
      console.error(err)
      wx.reLaunch({
        url: `http://yourUrl`
      })
    }
})

这种解决方案的思路就是每次histroy栈存满之后就清空，然后重新开始存。缺陷是，每次重新开始时，后退操作就失效了，因为此时栈里只有一条纪录。