vue-router实现无感刷新页面

无感刷新页面

对于某些应用场景，当我们返回主页时候，有一些插件的方法可能因为没有被销毁而导致再次使用时产生一些不可预料的问题。

这时候，最简单的方式就是重新刷新一下页面，如果不考虑用户体验的话：

 window.location.reload();

window.location.reload() 相当于 按页面刷新按钮

普通的页面刷新方式，会造成页面有闪烁一下的现象。那么在使用vue-router的页面中，怎么才能做到无感刷新呢？

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

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

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

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

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

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

在你要刷新的页面组件调用这个方法

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

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

provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

提示：provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。