设置div为fixed层模拟单页面。点击手机返回键无法返回

Question

移动端的一个项目大致情况是这样的：

点击车型以后会列出品牌

再点击则列出车系

我现在的做法是:

品牌和车系分别做成了一个fixed层浮在的上面，点击的时候则显示出品牌，再点击品牌显示车系，这个时候车系浮在品牌的上面。 这样有一个问题就是，点击手机上的返回键会自己返回到第一张的位置。

跟现在这个http://m.xin.com/evaluate_car存在一样的问题。

听同事说过前端路由的方式，还是不知道怎么写。有没有朋友指教下或者有什么好的前端路由库。

Answer 1

因为手机返回键是根据历史记录来返回的。但你弹出你的浮层，并不会增加历史记录。所以当你按返回键的时候，它就回到第一张的位置啦~

因此如果你想实现点击浮层可以按返回键，就要使用history的pushstate这个api来增加一个历史记录，这样就可以按返回键了~不过按返回键可能会导致重新请求，且后端要进行一些处理（因为返回键是重新请求这个地址，但是有缓存野很快）。不过，经过我的实践，还是不要用这种方式的好，很恶心，有很多东西需要处理（具体你可以试试）。直接浮层用页面的返回按钮就好了。

本来是想写一篇文章记录的。以便跟我一样的后来者能省去找资源的时间。地址在这里：
前端路由的原理和实现。不过最近太懒了，就没有写完。。。（如果需要，可以催我。。。）

不过你可以查看以下文章：

前端：将网站打造成单页面应用SPA（一） - 前端杂谈 - SegmentFault https://segmentfault.com/a/11...

库的话，看我文章吧。下面的那些库名字在github上搜就是啦~（自己动手丰衣足食~）