Vue刷新组件,页面刷新

最新推荐文章于 2025-06-26 23:31:00 发布

原创最新推荐文章于 2025-06-26 23:31:00 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件 #刷新

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue应用中使用`keep-alive`和自定义提供/注入方式，实现在不同路由页面间按需刷新当前视图。通过`refreshView`方法，控制组件的显示和隐藏，以提高用户体验。

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

通过:provide / inject 方式实现!
在这里插入图片描述

Home.vue

<keep-alive :include="tagsList" v-if="showView">
     <router-view></router-view>
</keep-alive>


 <script>
export default {
    provide(){
        return {
            refreshView:this.refreshView
        }
    },
    data() {
        return {
            showView: true // 用于点击当前页的router时，刷新当前页
        };
    },
    methods:{
        refreshView () {

            this.showView = false // 通过v-if移除router-view节点
            this.$nextTick(() => {
                this.showView = true // DOM更新后再通过v-if添加router-view节点
            })
             
        }
    }
    </script>

在组件中使用:

<span @click="refresh">刷新</span>

<script>
    export default {
        inject:['refreshView'],
          methods:{
            refresh(){
                this.refreshView()
            }
        }
    };
</script>