vue项目开发中刷新当前页面几种方式

vue项目开发中刷新当前页面几种方式

1.场景

在使用百度富文本编辑器时,进行信息填报,保存成功后应禁止编辑,由于每一个百度富文本编辑器都是个独立的实例,此时需要重新加载编辑器并获取实例对象,将编辑器实例readonly属性,设置成"true",禁止编辑

遇到问题

1.用vue-router重新路由到当前页面，页面是不进行刷新的
2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，卡顿,用户体验不好

解决方案

provide / inject 组合使用

作用 [官方文档抄过来的介绍 ]
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
简单的说，当组件的引入层次过多，我们的子孙组件想要获取祖先组件的资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    provide () {
    	return {
    		reload: this.reload
    	}
    },
    data() {
      return {
      	 isRouterAlive: true
      }
    },
    watch: {},
    created() {
    },
    methods: {
    	reload () {
		     this.isRouterAlive = false
		     this.$nextTick(function(){
		     	  this.isRouterAlive = true
		     })
		     console.log("刷新刷新刷新刷新刷新刷新刷新刷新刷新刷新刷新刷新刷新刷新")
		     console.log(this.isRouterAlive)
		  } 
    },
    computed: {}
  }
</script>
<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

report.vue
在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（保存成功后）,直接this.reload()调用，即可刷新当前页面。