最近的项目在做微信小程序。然后被提了一个很奇怪的单,当用户在界面内多次跳转,跳转一定次数后,路由跳转会失效。 我们项目中使用了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栈存满之后就清空,然后重新开始存。缺陷是,每次重新开始时,后退操作就失效了,因为此时栈里只有一条纪录。