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()