javascript - PWA分层返回如何处理更佳?

Question

假如有如下页面,用户按顺序访问后,按浏览器返回或者程序返回,怎么处理更合适?
A1,B1,C1都为根视图.

**A1/A2/A3**
**B1/B2/B3/B4**
**C1/C2/C3**

问题一:按目录顺序访问

访问记录:A1->A2->A3

返回方案1:A3->A2->A1

问题二: 重复访问

访问记录:A1->A2->A3->A2->A3->A1->A2->A3->A2->A3->A2->A3...

返回方案1:A3->A2->A3->A2->A3...->A2->A1
返回方案2:A3->A2->A1

问题三:跨目录访问

访问记录:A1->A2->A3->B3->B2->C1->C2->C3

返回方案1:C3->C2->C1->B2->B3->A3->A2->A1
返回方案2:C3->C2->C1

很明显浏览器使用的是方案1,从哪来就回哪去,在单页返回网站应用时,交叉访问过大时,无法有效的返回.
方案2,又是傻傻的按固定路径返回,用户无法回到原来的界面.

请问一下,大家设计WebApp时,访问路径如何处理?JS有没有方面路由管理.

Answer 1

刚好自己实现过返回管理，这里给题主一个思路吧。
分为两类，一种是SPA单页模式，一种是常规的浏览器跳转模式。其实两类思路是一样的，只不过储存访问足迹的方式不同。PWA的话和SPA方式类似吧。

下面是页面结构图：

核心思想在于配置父级路由：

B:{
   parent:['A']
}
C:{
   parent:['A']
}
G:{
   parent:['B','C']
}

D:{
   parent:['A','E']
}
H:{
   parent:['D']
}
F:{
   parent:['E']
}
I:{
   parent:['F','D']
}

如果用户访问次序为：
A->B->G->B->A->C->G->C->A->D->I
此时返回应为：
I->D->A

计算思路就是自行维护一个历史足迹，如果是SPA就记录在数组变量中，push进去，如果是普通页面跳转，可以使用sessionStorage记录。

如果当前页面为I时，去历史中寻找I所对应的父级路由地址（们）的index，index最大的则为用户刚刚访问过的父级路由，跳转至该父级路由即可，并将最后一条记录移除。