vue刷新页面跳转新页面但又跳转回原页面的问题

最新推荐文章于 2025-06-21 16:19:10 发布

支支დ

最新推荐文章于 2025-06-21 16:19:10 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47375788/article/details/135926455

文章讲述了Vue中遇到的刷新页面后跳转回原页面的问题，通过在`mounted`阶段添加`load`事件监听并在`beforeunload`和`beforeDestroy`生命周期钩子中管理事件，以确保在刷新后正确跳转到目标页面，防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue刷新页面跳转新页面但又跳转回原页面的问题
错误代码：

window.addEventListener('beforeunload', this.handleBeforeUnload);

  beforeDestroy() {
    // 在组件销毁时移除事件监听器，以防止内存泄漏
    window.removeEventListener('beforeunload', this.beforeunloadFn)
  },

beforunload是指页面刷新前执行的最后函数所以即使跳转另一页面也会在刷新完成后跳转回原页面,此方法适用与刷新页面前提交表格数据或阻止刷新的操作。
解决办法：在mounted内创建监听事件

window.addEventListener('load', this.beforeunloadFn);

methods里写方法

   beforeunloadFn(event) {
      if (this.$route.path !== '/dashboard/analysis'){
        this.$router.push({name:'dashboard'})
      }
    },

 destroyed() {
    // 在组件销毁时移除事件监听器，以防止内存泄漏
    window.removeEventListener('load', this.beforeunloadFn)
  }

load,在js语法里是onload,这里省去on,onload指页面加载完成后执行window.onload()里的js函数,首次加载页面是建立一个onload的监听事件并不执行,针对的是当前页面的下一次加载即刷新去执行onload里的方法,配合destroyed,可解决某一vue单页面刷新跳转另一页面的问题