Vue无感刷新当前页面

使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。

1. 首先在根组件 App.vue 定义这个方法

 

html

复制代码

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

 

javascript

复制代码

export default {
    //暴露 reload 这个方法，方便组件调用
    provide() {
        return {
            reload: this.reload,
        }
    },

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

    methods: {
        //重新加载的方法
        reload() {
            this.routerAlive = false
            this.$nextTick(function () {
                this.routerAlive = true
            })
        },
    },
}

2. 这样就可以在你要刷新的页面组件调用这个方法

 

javascript

复制代码

export default {
    inject: ["reload"],
    ......

    methods:{
        handleReload(){
            //在你要用到的地方调用这个重新刷新的方法
            this.reload()
        }
    }
}

3. 最后如果不考虑用户体验的话，也可以用下面的方法：

 

javascript

复制代码

// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()