关于vue中页面刷新

最新推荐文章于 2024-03-22 16:53:06 发布

贝塔贝卡贝

最新推荐文章于 2024-03-22 16:53:06 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/112772036

本文介绍了一种在Vue应用中实现页面刷新而不会出现闪烁效果的方法。通过在App.vue文件中控制router-view的显示与否来达到平滑刷新的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js页面刷新：

window.location.reload()

vue中页面刷新：

this.$router.go(0)

以上两种刷新方法会出现闪的效果，相对来讲，这对用户的体验不是很好，那有页面刷新既不闪，还能实现页面刷新的效果呢？有，如下：

1.App.vue:

<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
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  }
}
</script>