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

小阳生煎2025-11-05 21:32

javascript 复制代码

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

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

Nuxt项目

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

javascript 复制代码

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

javascript 复制代码

// plugins/event-bus.js
import Vue from 'vue'

export const EventBus = new Vue()

javascript 复制代码

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

javascript 复制代码

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

在 layout 组件中 emit 事件

javascript 复制代码

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

javascript 复制代码

假设你的全局刷新在这里
 <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 等的路由页面修改

javascript 复制代码

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();
  }
}

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

Nuxt项目

VUE项目

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