vue中列表页面跳转打开新页面，关闭新页面并刷新列表页面

程序媛_MISS_zhang_0110

已于 2024-01-04 17:33:35 修改

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-07-25 17:12:58 首次发布

本文链接：https://blog.youkuaiyun.com/MISS_zhang_0110/article/details/131922353

文章讲述了在Vue应用中，如何从列表页面跳转到新页面，并在新页面关闭时刷新列表页面的方法。通过设置window.onunload事件监听页面关闭，以及使用this.childWindow对象来管理新打开的页面，实现页面间的交互和刷新功能。

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

vue中列表页面跳转打开新页面，关闭新页面并刷新列表页面

一、列表页面
二、新页面

一、列表页面

 mounted() {
        // 监听当前页面的关闭事件
        window.onunload = () => {
            if (this.childWindow && !this.childWindow.closed) {
                this.childWindow.close()
            }
        }
    },

//跳转
handleAdd() {
      let routeUrl = this.$router.resolve({
          path: '/home/projectContractInput',
          query: { type: 'add' },
      })
      this.childWindow = window.open(routeUrl.href, '_blank')
      this.childWindow.onunload = () => {
          if (this.childWindow && this.childWindow.closed) {
              this.getList()
          }
      }
  },