vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue刷新页面后params丢失

vue刷新页面后params参数丢失的原因和解决方法

作者:UserGuan

这篇文章主要给大家介绍了vue刷新页面后params参数丢失的原因和解决方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

页面跳转($router)方式

方式一(刷新页面参数会丢失)

此方法不会在浏览器 url 地址栏中显示传递的参数

this.$router.push({ name: 'a', params: { name: '张三', age: '18' }}) // 页面跳转
 
this.$route.params // 参数接收

方式二(刷新页面参数不会丢失)

此方法会在浏览器 url 地址栏中显示传递的参数(数据会暴露在外面),即:'a?name=张三&age=18'

this.$router.push({ path: 'a', query: { name: '张三', age: '18' }}) // 页面跳转
 
this.$route.query // 参数接收

刷新页面后 params 参数丢失

发送数据的页面A

this.$router.push({ name: 'A', params: { name: '张三', age: '18' }})

接收数据的页面B

this.curObj = this.$route.params

当进入 B 页面后,按 F5 刷新页面 B 页面接收的参数会丢失。

解决办法

使用 localStorage 或 sessionStorage 浏览器自带的 mini 数据库(即本地存储)

存储在 localStorage 里的数据如果不是主动去清除的话,就算浏览器关闭了,下次打开浏览器数据还是会存在,是一个长期的存在。

存储在 sessionStorage 里的数据只要关闭浏览器就会自动清除,但是刷新网页不会清除,是一个临时的存在。

可以利用 vue 里浏览器刷新不会触发 beforeDestory 生命周期函数和数据储存本地这两个方法来补全 params 刷新丢失数据的短板。

发送数据的页面A

this.$router.push({ name: 'A', params: { name: '张三', age: '18' }})

接收数据的页面B

mounted() {
  let routeParam = this.$route.params
  if (Object.entries(routeParam).length === 0) {
    routeParam = JSON.parse(sessionStorage.getItem('storageObj')) // 从本地存储中获取数据
  } else {
    sessionStorage.setItem('storageObj', JSON.stringify(routeParam)) // 将数据储存在本地存储里面
  }
  this.curObj = routeParam
},
beforeDestroy() {
  sessionStorage.removeItem('storageObj') // 将数据从本地存储删掉
},

没有用 localStorage 是因为如果用户跳转到页面 B 后,直接关闭浏览器,再打开浏览器输入网址,就能从本地存储找到该数据,但 sessionStorage 关闭浏览器,数据就消失了。不会出现 localStorage 的问题。

以上就是vue刷新页面后params参数丢失的原因和解决方法的详细内容,更多关于vue刷新页面后params丢失的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文