当前位置：首页 > article >正文

【VUE】实现当前页面刷新，刷新当前页面的两个方法（如何在一个页面写一个方法提供给全局其他地方调用）（如何重复调用同一个路由实现页面的重新加载）

article 2024/11/15 11:57:14

实现前端某个页面刷新，非F5整个系统刷新，只刷新内容部分，按具体需求可以采用一下两个方式实现

方法一：路由快速切换实现页面重新加载

特点：只刷新页面而不是整个系统，样式会重新加载
本质：如何重复调用同一个路由实现页面的重新加载

案例：在导航条有个返回首页的标识，点击进行页面跳转或者重新加载

1、新增一个空白页面pageAllBack.vue用作跳板

<template>
	<!-- pageAllBack.vue -->
</template>

<script>
export default {
	data() {
	  //跳到首页 假设首页路由名称是index
	  this.$router.replace({
	  	path: "",  
	  	name: "index" 
	  })
	  return {}
	  },
	created() {
		//console.log("跳板页面")
	}
}
</script>
<style>
</style>

2、定义路由

  {
    path: "/pageAllBack",
    component: () => import("@/xxx/xxxxxxx/pageAllBack"),
    hidden: true,
  },

3、在触发方法调用（导航顶部的一个回到首页标识）

<template>  
  <div>  
    <button @click="refreshHomeData">  
      <img src="path/to/icon.png" alt="回到首页" />  
    </button>  
  </div>  
</template>  

<script>  

export default {  
  methods: {  
    refreshHomeData() {  
	  //跳转到首页
	  this.$router.push(`/pageAllBack`);
    }  
  }  
}

方法二：事件总线监听只处理页面数据重新请求

特点：页面样式不会重新加载，只对数据进行重新请求，可针对具体数据进行请求
本质：如何在一个页面写一个方法提供给全局其他地方调用
确认是否建有事件总线，没有则创建，以下是一个简单的 eventBus.js 文件示例：

// eventBus.js  
import Vue from 'vue';  
export const EventBus = new Vue();

用法：
导入事件总线：在需要使用事件总线的组件中导入 eventBus.js。
发布事件：使用 EventBus.$emit('eventName', data) 来发布事件。
订阅事件：使用 EventBus.$on('eventName', callback) 来订阅事件。
清理事件监听：在组件销毁时，使用 EventBus.$off('eventName', callback) 来清理事件监听，避免内存泄漏

案例：在导航条有个返回首页的标识，点击进行页面跳转或者数据刷新

1、在需要刷新页面创建和销毁事件监听（首页数据）

<template>  
  <div>  
    <h1>首页</h1>  
    <p>数据: {{ data }}</p>  
  </div>  
</template>  

<script>  
import { EventBus } from './eventBus';  

export default {  
  data() {  
    return {  
      data: null,  
      refreshDataHandler: null // 在 data 中定义  
    };  
  },  
  created() {  
    // 在 created 钩子中定义事件处理函数  
    this.refreshDataHandler = () => this.fetchData();  
    EventBus.$on('refreshData', this.refreshDataHandler);  
    this.fetchData(); // 初始数据加载  
  },  
  methods: {  
    fetchData() {  
      // 这里是获取数据的逻辑  
      console.log('请求数据...');  
      this.data = '新数据'; // 示例数据  
    }  
  },  
  beforeDestroy() {  
    // 使用相同的函数引用来移除事件监听  
    EventBus.$off('refreshData', this.refreshDataHandler);  
  }  
}  
</script>

2、在触发方法调用监听（导航顶部的一个回到首页标识）

<template>  
  <div>  
    <button @click="refreshHomeData">  
      <img src="path/to/icon.png" alt="回到首页" />  
    </button>  
  </div>  
</template>  

<script>  
import { EventBus } from './eventBus';

export default {  
  methods: {  
    refreshHomeData() {  
      // 触发事件总线  假设首页路由名称是index
      if (this.$route.name == 'index') {  
	      // 当前路由是 index 刷新数据
	  	 EventBus.$emit('refreshData');
	    }else{
	     //跳转到首页
	  	 this.$router.push(`/index`);
	    }  
    }  
  }  
}  
</script>