Vue 使用 reload 刷新当前页面

最新推荐文章于 2024-11-21 17:37:34 发布

故剑何寻

最新推荐文章于 2024-11-21 17:37:34 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue web前端

本文链接：https://blog.youkuaiyun.com/qq_33430445/article/details/102936775

web前端同时被 2 个专栏收录

14 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

本文介绍了一种在Vue应用中利用provide/inject特性刷新当前页面的方法，避免了传统刷新方式导致的用户体验不佳问题。通过在父组件中设置一个布尔值控制子组件的显示与隐藏，达到页面局部刷新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

解决问题

用vue-router重新路由到当前页面，页面是不进行刷新的
采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

<template>
    <el-container>
        <el-main>
            <router-view v-if="isRouterAlive" />
        </el-main>
    </el-container>
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
export default @Component({
    provide() {
        return {
            reload: this.reload,
        };
    },
})
class Main extends Vue {
    isRouterAlive = true;

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

在使用reload的页面：

import Vue from 'vue';
import Component from 'vue-class-component';

export default @Component({
    inject: ['reload'],
})
class Child extends Vue {
    handleSwitchOrg() {
        this.reload();
    }
}
</script>