【vue】使用provide，inject来刷新页面

关注

原创最新推荐文章于 2026-03-25 00:21:37 发布 324 阅读 AI 写同款· GEO 优化 ›

从零构建个性化AI助手：基于Mem0与本地大模型的记忆化实践本文详细介绍了如何利用Mem0与本地大模型构建个性化AI助手，实现记忆化应用结构的实践方法。从开发环境搭建、记忆存储机制到个性化交互实现，提供了完整的解决方案和代码示例，帮助开发者在本地环境中创建能记住用户习惯和偏好的智能助手。阅读详情

问题：使用其他方式刷新当前页面有时会出现一段时间的空白，用户体验不好(利用这些方式来重新加载数据也不好)

provide代码：

//被控制页面
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default  {
  name:  'App',
  provide(){
    return {
      //方法定义在provide中传给inject
      reload: this.reload
    }
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  methods:{
    //定义刷新方法
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  }
}
</script>

inject代码：

//控制页面
<template>
  <!--此处控制刷新-->
  <div @click="handleClick"></div>
</template>

<script>
export default {
  inject:['reload'],
  methods:{
    handleClick(){
      // 重新加载当前页面
      this.reload();
    }
  }
};
</script>

provide和inject可以跨组件传递变量和方法

收录于