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

Vue实现全局设置一个刷新按钮只刷新当面路由页面不跳转操作功能

news 2025/11/5 14:58:51

项目中实现实现全局设置一个刷新按钮 只刷新当面路由页面 不跳转操作功能
PSPPSPS 
比如我在layout里面的全局设置一个刷新功能按钮
进入到了a b c的路由页面 基于筛选条件搜索后返回的数据
点击全局刷新的按钮对应的每个路由页面返回初始化的状态数据
并不跳转默认页面 实现刷新操作功能

这里需要使用到兄弟组件功能具体如下

Nuxt项目

创建一个全局事件总线（EventBus）

在 plugins/ 目录下新建文件：event-bus.ts

// plugins/event-bus.js
import Vue from 'vue'export const EventBus = new Vue()

然后在 nuxt.config.js 中注册它：

// nuxt.config.js
export default {plugins: ['~/plugins/event-bus']
}

在 layout 组件中 emit 事件

layout就是你的全局页面 相当于header  container footer 的总布局里面
具体写在哪里看你的项目的全局页在哪

假设你的全局刷新在这里<el-button type="primary" @click="btnReset">刷新</el-button><script>import { EventBus } from '~/plugins/event-bus'//引入使用btnReset() {EventBus.$emit('global-refresh')
}</script>

3.在你的a b c 等的路由页面修改

import { EventBus } from '~/plugins/event-bus'created() {this.loadData()EventBus.$on('global-refresh', this.handleGlobalRefresh)
},
beforeDestroy() {EventBus.$off('global-refresh', this.handleGlobalRefresh)
},
methods: {
resetFilters() {this.queryParam.regionIds = [];// 默认的条件保持空this.selectedNodes = [];// 默认的条件保持空
}handleGlobalRefresh() {this.resetFilters();//这个是你的筛选条件 写这个点击刷新回到初始化状态数据this.loadData();}
}