vue刷新页面后params参数丢失的原因和解决方法
更新时间：2023年12月14日 10:22:57 作者：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丢失的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue设置页面轮询实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-11-11
下面小编就为大家分享一篇基于IView中on-change属性的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,就是在保持代码运行结果不变的前提下,去除无用的代码,本文给大家介绍Vue 3.0中Treeshaking特性是什么,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了Vue实现回到顶部和底部动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue实现2048小游戏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用的原理解析
作者通过二次封装Element-Plus的el-dialog组件,实现动态显示与数据传递功能,提升项目灵活性和代码复用性,适用于用户编辑、文件上传确认、权限管理等多场景需求,本文给大家介绍从0到1解锁Element-Plus组件二次封装El-Dialog动态调用的原理解析,感兴趣的朋友一起看看吧2025-07-07
Vuex子模块调用子模块的actions或mutations实现方式
这篇文章主要介绍了Vuex子模块调用子模块的actions或mutations实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue的ElementUI表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
Vue中使用vue-count-to(数字滚动插件)详细教程
这篇文章主要给大家介绍了关于Vue中使用vue-count-to(数字滚动插件)的相关资料,最近需要开发一个数字滚动效果,在网上找到一个关于vue-countTo的插件,觉得这个插件还不错,需要的朋友可以参考下2023-09-09
最新评论