需求是要实现复制的功能,本来借助的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()
})
},