【mpvue】跳转相同路由，再返回页面数据会丢失

问题描述

此问题主要出现在相同路由的详情页重复跳转的情况。先假设页面A路径为/page/a/main?id=1，页面A'路径为/page/a/main?id=2，页面B路径为/page/b/main?id=1。那么bug的产生方式大体分为两种情况：

1. 用户先跳转页面A，再跳转到页面A'，之后返回页面A。此时看到的是页面A'的数据

2. 用户跳转顺序为页面A->页面B->页面A'，之后返回页面A。此时看到的是页面A'的数据

问题产生的原因

mpvue会把相同路由的页面视为同一份数据，也就是说当你前往页面A'，mpvue不会创建新的页面对象，而是复用页面A,所以会在页面A原有的数据上进行修改，导致返回页面后，数据仍是上个相同路由页面的数据

解决方案

• 第一种情况的解决: 跳转页面A'前先保存当前页面A数据以栈的形式存储到小程序本地。由于页面A'返回会触发onUnload的生命周期，所以在A'页面unload时，判断本地是否存过A'数据，如果存储过则删除并更新本地数据。返回页面A时会执行onShow生命周期，此时取出本地数据赋值给变量localData(该步骤还需要用一个变量flag来标识当前页面是否是第一次load，不然的话，从A到A'页面后，A'页面也会执行一次恢复数据的方法，导致看到的是A页面的数据而不是A'的数据)，将页面A数据从localData取出并更新页面数据。

• 第二种情况的解决: 此方案需要比上一个方案多一步记录上一个路由的操作,每个页面unload时将当前页面的路由用一个变量存储在本地,这个本地变量用于记录上一个页面的路径。这样的话当页面A->页面B->页面A'，再返回页面A时，只需要判断当前页面路径和上一个页面路径是否相同，如果两个路径不相同(不用考虑路由参数)，则在onShow里执行方法恢复数据即可。