VUE刷新当前页面，重载页面数据

最新推荐文章于 2024-07-29 15:16:51 发布

eric823

最新推荐文章于 2024-07-29 15:16:51 发布

阅读量1.4k

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/baidu_24941933/article/details/113526332

版权

在Vue项目开发中，为避免CRUD操作后使用location.reload()或this.$router.go(0)导致页面空白，可以利用provide/inject实现router-view的重新渲染以刷新页面数据。具体步骤包括在APP.vue的根组件定义刷新方法，保持路由初始状态为显示，并在子组件中调用此方法来重载页面。

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

VUE刷新当前页面，重载页面数据

在开发Vue项目过程中，执行CRUD完操作的时候，我们需要刷新一下页面，重载数据。但发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，体验不佳；在vue中，可以用到一个 provide / inject 这对用例，通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果。

1.首先在我们的根组件APP.vue里面,写入刷新方法，路由初始状态是显示的。

<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  },
  components:{
  }
}
</script>

2.然后在子组件里面进行引用