首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vuex + sessionstorage 解决vue项目刷新后页面空白数据丢失

所以在getItem这里需要JSON.parse来将JSON 字符串转换(“格式化”)为对象、     在setItem里需要JSON.stringify处理来将对象或者数组转换(“压缩”)为一个 JSON...所以,意味着用户进入页面或者刷新页面,这个值就会变成我自己设定的100000.那么第一个限制条件就完成了。...这样,如果这两个条件同时成立,那就能断定他是刷新了。 那么这个状态值需要在一开始没有,页面初始化后才存在,且页面刷新不丢失。 什么数据这么神通广大?!那就是sessionstorage设置的数据。...TeamID缩写,需要保留的重要信息 然后开始判断条件是否同时成立: 但是这里有一点,需要利用js的同步逻辑,这段判断的代码要提前放到最顶部,即初始化数据没有设定之前: 因为如果数据设定以后,每次初始化进入页面后...TeamID=' + newTeamID; } } 这样解决了刷新后页面空白的问题,重定向重新请求数据 但是如果为了解决部分数据丢失的问题,也可以直接将数据实现存在sessionstorage内

3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vuex在页面刷新后数据被清除

    用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store...)中 很显然,第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。...而第二种可以保证刷新页面数据不丢失且易于读取。...因为我们是只有在刷新页面时才会丢失state里的数据,想法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件在页面刷新时先触发的。...$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage

    3.1K00

    Vue路由嵌套刷新后页面没有重新渲染

    Vue路由嵌套刷新后页面没有重新渲染 强烈推介IDEA2020.2破解激活,IntelliJ...IDEA 注册码,2020.2 IDEA 激活码 问题 在路由嵌套时,如果此时地址栏到了子路由下面,刷新页面路由地址肯定不会有变化,那么此时会出现子路由页面没有重新渲染的情况。...让它显示出来,在父路由重新渲染完成后,将条件渲染的值变为false,在修改渲染条件数据之后使用 $nextTick,再将条件渲染的值变为true,相当于重新加载了一次子路由。...}); } 方法2 其实上述方法的原理就是让浏览器认为是一个新的子路由,所以对其进行重新加载渲染,同理,另一种方法是给容器router-view一个key值即可完美解决,每次刷新的随机值都让容器看上去是一个新的

    1.5K30

    vue项目如何刷新当前页面「建议收藏」

    :9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种...: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!...go( 0) 这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好 2、新建一个空白页面supplierAllBack.vue...supplierAllBack.vue里面的内容: 这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用 3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下...来控制 然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行 至此,三种方式都介绍完了,如果对你有帮助记得给个赞哈

    2K20

    springboot项目打包后页面访问不到

    ——屠格涅夫 今天项目打包上线,有个页面死活找不到,报错500提示模板不存在 但在本地idea运行后又能访问到 首先我先找了下Controller和页面,粗略看了下,好像没啥问题 生成的target...目录下也有 我本来还怀疑是nginx配置有问题,查看了下配置文件,并没有/admin的路径重写 然后我使用mvn package打成jar包后,即便是本地java -jar运行也是找不到该模板。。。...我再次逐句逐句查看代码 发现了问题所在: 这个地方和其他的Controller中跳转页面写的不一样,多了个杠!!!...最坑的就是,在idea中运行的项目能正确访问,到了线上就访问不到了,最后去掉这个杠就好了。。。

    1.5K10
    领券