Vue页面回退参数丢失

场景：A页面进入到B页面时，通过路由传参数，由B页面获取。B页面进入到C页面，回退到B页面（点击浏览器后退按钮，或手机后退功能）时参数丢失导致数据无法正常显示。
补充：C页面同样需要传入参数，且参数体包含B页面参数。（由于前置条件限制比较多，此解决方案比较取巧。）

通过度娘查找了一些方式，有的建议使用Vuex的，有的建议使用LocalStorage/SessionStorage的，八仙过海，真是条条大路通罗马。

由于本人属于vue初学者，学习能力一般，很容易陷到发散的怪圈里（遇到一个新技术去查资料，在过程中又遇到一个新知识，导致如此循环，最终感觉这玩意太难了……），所以放弃了Vuex，觉得真正需要这个的时候再去了解学习吧。第二种方式在查询Storage时有人提出如果遇到XSS，使用Storage是不安全的，强迫症的突然发作，虽然现阶段只是学习，即使真正的使用环境也只是手机端，不存在修改网页内容的情况下，还是选择了放弃此方案。

于是乎触发了自身钻牛角尖的特性，尝试通过其他方式去解决这个问题。由于使用vue-route来跳转，决定在官方文档查找资料，看是否有途径可以解决。

先上最终的解决方案，通过导航守卫中的route.beforeRouteEnter解决了这个问题，可能还有更好的解决方式，现阶段对这种方案还是比较满意的，既没有发散学习点，也没有使用vue以外的技术。

paramB为需要的参数，由于C页面入参包含B页面入参，因此在B页面添加此配置，监控是否从C页面返回，来获取参数值显示相关数据。

• 由于beforeRouteEnter不能使用this关键字，只能通过在next()中添加回调来实现对本页面的操控，详见官方解释组件内的守卫。

beforeRouteEnter (to, from, next) {
    // console.log(to)
    // console.log(from)
    next(vm => {
      if ('C页面' === from.name) {
        //从C页面后退到B页面
        vm.paramB = from.params.paramC
      } else {
        //从A页面正常进入到B页面，等同于vm.$route.param.paramA
        vm.paramB = to.params.paramA
      }
      // console.log(vm.paramB)
      // B页面数据初始化方法
    })
  },

---

在发现导航守卫这个东西时，感觉好像可以解决问题，本着拿来主义的想法，于是乎踩坑旅程开始了。

监控C页面路由，在发生页面回退时传递参数。

1. 直接赋值给B页面路由

beforeRouteLeave (to, from, next) 
    // 跳转页面路由信息
    console.log(to)
    // console.log(from)
    to.params = {paramB : this.paramC}
    next()
  }

FK竟然是read only属性- -#

微信截图_20190626154203.png

2. 修改next()中断当前导航，跳转到另一个地址

beforeRouteLeave (to, from, next) {
    // 跳转页面路由信息
    console.log(to)
    // console.log(from)
    if ('B页面' === to.name) {
      // 后退到前一页面，需要添加参数
      next({ name: 'B页面', params: { paramB : this.paramC } })
    } else {
      next()
    }
  }

修改导航后，又重新回调了beforeRouteLeave方法，再次进入判断，如此反复导致死循环。

微信截图_20190626155305.png

遗留问题1：为什么又重新进入了该方法，如果直接跳转，应该就能解决了。然而发现真是too young too simple

3. 添加条件判断，中断导航死循环（到此发现路有点走偏了）

beforeRouteLeave (to, from, next) {
    // 跳转页面路由信息
    console.log(to)
    if ('B页面' === to.name && 0 === this.goBack) {
      // 修改控制参数值，中断死循环
      this.goBack = 1
      // 后退到前一页面，需要添加参数
      next({ name: 'B页面', params: { paramB : this.paramC } })
    } else {
      next()
    }
  }

遗留问题2：页面终于可以正常回退了，但是B页面需要点击2次才能回退到A页面。第一次点击回退时并没有触发B页面的beforeRouteLeave方法，第二次真正回退到A页面时才触发了该方法。这是什么鬼？
看来不了解机制会死的很惨- -# 以后再慢慢研究吧