vue刷新当前页面的方法

不为霜停

已于 2022-04-16 14:15:33 修改

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

于 2022-03-22 21:07:29 首次发布

本文链接：https://blog.csdn.net/mushroomLNL/article/details/123669534

版权

当使用this.$router.push()尝试刷新Vue页面时，可能会遇到错误且DOM不渲染。本文探讨了不推荐的location.reload()方法及其导致的瞬间空白问题，然后介绍了使用provide/inject来实现在当前页面刷新的同时保持组件状态，并利用Vue的nextTick确保DOM更新后的操作。通过这些方法，可以解决页面刷新和组件重渲染的问题。

摘要由CSDN通过智能技术生成

第一个想到的方法是this.$router.push() , 但是会报错 , 不让自己页面跳转自己页面 , 就算解决了这个问题跳转了之后 , dom也不会渲染 , 页面的数据显示不出来 , 所以查询了一下方法来解决问题

location.reload() 不推荐 : 页面出现一瞬间的空白

这个方法相当于( ctrl + R )刷新当前页面 , 但是刷新过后vuex里面的值也会重新刷新 , 当我们要实现多个组件根据 vuex 里面的值做相应的判断时 , 这个功能不能实现 , 于是我们结合window.sessionStorage.getItem() 和 vuex以实现vuex中的值在本次会话的时候不会被刷新

//freeze状态只出现一次 , 解封之后知道浏览器关闭都不在出现
this.$store.commit('changeFreeze')
//  1. dom没有渲染 , 我们要重新渲染dom 
location.reload()//这种刷新方式太耗能了,亟待优化
//  2. 强制刷新之后freeze还会出现-->把值保存在session中
window.sessionStorage.setItem('freeze',0)


以下是vuex中的
freeze