VUE 刷新当前页面

秒速五厘米 2023-06-07 14:26 7阅读 0赞

vue刷新当前页面有挺多种方法，比如

### `    window.location.reload()`  或者  `this.$router.go(0)` ###

### 但是这两种方法是会出现一瞬间的白屏，体验不好，不推荐 ###

## 友好的刷新页面的方法： ##

## 步骤： ##

一、在 app.vue 设置

1、在app.vue的<router-view></router-view> 加上 v-if 属性

2、在data里面加上isRefresh,当然这个属性名可以自己定义，默认值为true

data () {
          return {
            isRefresh: true
          }
        },

3、在 methods 里面加入一个刷新的方法

methods: {
          reload(){
            this.isRefresh = false
            this.$nextTick(function() {
              this.isRefresh = true
            })
          }
        }

4、最后，需要把这个函数 provide 出去

provide () {
          return {
            reload: this.reload
          }
        },

**app.vue**整体代码

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

二、在需要的页面上调用这个函数

1、首先注入这个函数

inject: ['reload'],

2、调用刷新页面 函数

this.reload();

整体代码：

<template>
        <button @click="refresh"></button>
    </template>
    <script>
        export default{
            inject: ['reload'],
            methods: {
                  refresh () {
                      this.reload()
                  }
            }
        }
    </script>

这样就行了