【VUE】实现当前页面刷新，刷新当前页面的两个方法（如何在一个页面写一个方法提供给全局其他地方调用）（如何重复调用同一个路由实现页面的重新加载）
实现前端某个页面刷新，非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>