第一个想到的方法是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: window.sessionStorage.getItem('freeze') || 1, dom页面根据vuex中的freeze来判断显不显示 <div class="all0" v-if="this.$store.state.freeze===1"> provide / inject
使用provide / inject 来实现 当前页面刷新 , 组件自身刷新 , 并且重新渲染dom
父组件中编写provide向子组件提供资源 , 利用 v-if ,来显示app在dom树上存在与否
<template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template> <script> export default {
provide() {
return {
reload:this.reload } }, data() {
return {
isRouterAlive:true } }, methods: {
reload(){
this.isRouterAlive = false this.$nextTick(function(){
this.isRouterAlive = true }) } }, } </script> 子组件中inject使用父组件提供的方法
export default {
//注入刷新依赖provide/inject inject:['reload'], methods:{
//使用inject中的方法 this.reload() } } nextTick
在下次dom刷新之后调用它的回调函数
上面的nextTick的作用是在app刷新之后 , 重新给data中的 isRouterAlive 赋值true
this.$nextTick(function(){
this.isRouterAlive = true }) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229133.html原文链接：https://javaforall.net
