快捷導(dǎo)航

vue不用window的方式如何刷新當(dāng)前頁面

更新時(shí)間：2023年11月09日 10:01:20 作者：donggua_123

這篇文章主要介紹了vue不用window的方式如何刷新當(dāng)前頁面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目中我們很多時(shí)候需要刷新頁面，比如本地用戶信息更新后，或者需要重新加載當(dāng)前頁面的數(shù)據(jù)時(shí)，使用window.location.reload()或者window.history.go(0)方法都是整個(gè)窗口的刷新，和h5快捷鍵一樣，會(huì)有短暫空白出現(xiàn)，體驗(yàn)很不好，這里說兩種在vue項(xiàng)目里使用的無感知刷新頁面方法：

一、provide/inject方法

父組件中provide提供的屬性可以在任何子組件里通過inject接收到，那么我們?cè)贏pp頁面動(dòng)態(tài)改變總路由的顯示和隱藏來達(dá)到刷新的效果。

在App頁面定義一個(gè)reload方法：

App.vue

        reload() {
            this.defaultActive = false;
            this.$nextTick(() => {
                this.defaultActive = true;
            });
        }

defaulActive用于控制頁面的顯影：

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

provide提供子組件訪問的入口：

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

在需要刷新的頁面通過inject接收到該全局方法：

page.vue

inject: ["reload"]

需要刷新的時(shí)候調(diào)用該方法：

        refresh() {
            this.reload();
        }

全部代碼：

App.vue：

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

page.vue

<script>
export default {
    inject: ["reload"],
    data() {
        return {};
    },
    methods: {
        refresh() {
            this.reload();
        }
    }
};
</script>

二、中間頁面重定向

可以新建一個(gè)頁面reload.vue,當(dāng)page.vue需要刷新的時(shí)候，將路由指向reload頁面，再跳轉(zhuǎn)回page頁面，由于頁面的key發(fā)生了變化，所以頁面會(huì)被刷新

page.vue:

        refresh() {
            const { fullPath } = this.$route;
            this.$router.replace({
                path: "/redirect",
                query: { path: fullPath }
            });
        }

reload.vue:

<script>
    export default {
        name: "reload",
        props: {},
        beforeCreate() {
            const { query } = this.$route;
            const { path } = query;
            this.$router.replace({
                path: path
            });
        },
        render(h) {
            return h();
        }
    };
</script>