params路由跳转后丢失参数的修改

需求是要实现复制的功能，本来借助的params传参，路由跳转时携带全部参数，但是当跳转后点击了页面刷新时，所有数据都会丢失。

先复习一下，params传参类似post方式，不会在地址栏显示参数，相对来说，安全性较高一些，但是问题是刷新后会有数据丢失问题。

query方式传参类似get方式，会将参数显示在地址栏，安全性很低，一般情况下，安全性需求不高的场景下使用。例如：列表单个项目需要查看详情，那点击的时候直接将id传过去，跳转后再利用id发送请求，获取到对应数据进行后续操作等等......

因为我这个项目复制的数据相对来说不太需要考虑安全性问题，所以我就修改了传参方式，使用query进行传参。

this.$router.push({name: 'xxxx', query: {aaa: JSON.stringify(bbb)}})

跳转后的接收参数的页面内，借助组件内路由守卫beforeRouteEnter接收参数

  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.info = JSON.parse(to.query.aaa)
    })
  },

一开始我是直接这样修改的，

嗯，但是！出现问题了

因为我是通过next给info赋值一个对象，然后在mounted里面调用初始化数据函数getData，而getData函数中通过拿到info给页面对应元素赋值渲染的，是的，写完发现一个问题，为什么我的页面没有数据，是空的？

多看了几遍vue的组件钩子后才知道一件事，关于beforeRouteEnter和mounted的执行顺序问题。

beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter');
    next(vm => {
        console.log("vm")
  })
},
mounted() {
    console.log("mounted")
}

以上代码打印顺序是

beforeRouteEnter

mounted

vm

所以问题又来了，mounted在next前面执行！

所以代码再次修改，如下：

  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.info = JSON.parse(to.query.aaa)
      vm.getData()
    })
  },