今天得跟大家唠唠这个返回上一页的问题，前几天做项目差点被这玩意儿折腾死。本来以为就是一行代码的事儿，结果手机端各种抽风，点返回按钮要么白屏要么直接跳到首页，气得我差点把电脑砸了。
踩坑过程
刚开始偷懒用的最简写法：*(-1)，在电脑上测试美滋滋，一到真机上就完蛋。安卓机点了直接闪退，iPhone点了疯狂刷新页面，客户群里骂声一片。查了三小时文档才发现是路由守卫没处理页面跳转前的数据校验把返回动作给拦截了。
- 第一个坑：安卓物理返回键触发popstate事件时，Vue路由没清除缓存组件
- 第二个坑：ios的Safari浏览器会缓存页面快照，返回时直接显示过期数据
- 第三个坑：微信内置浏览器返回后表单内容居然自动回填了
完整解决步骤
现在直接把最终验证通过的方案甩出来，你们照抄就行：
- 先在路由配置文件里加beforeEach守卫，重点在meta里标记需要缓存的页面：
javascript
path: "/detail",
component: Detail,
meta: { keepAlive: true } // 关键参数
- 用watch监听路由变化，返回时手动触发数据重置：
javascript
watch: {
'$route'(to, from) {
if(* === 'DetailPage'){
*() // 必须清空表单数据
*(0,0) // 防止停留在底部
- 在按钮点击事件里改用这个骚操作：
javascript
goBack() {
if(* > 1) {
this.$*(-1)
} else {
this.$*('/') // 防止卡死
要命的细节
提醒几个血泪教训：千万不要用*跳转，会把路由记录清空；务必在组件里添加name字段，不然keep-alive不生效；
测试时重点看页面堆栈变化，我用的Vue DevTools路由历史面板。
昨天按这个流程重写后，安卓机返回时表单数据终于正常清空了，ios也不会重复提交数据。不过微信浏览器里还有个奇葩现象：返回时偶尔会闪过上个页面的截图。这个还在研究，有方案的老铁评论区支个招！
