不同页面如何同步信息

Y4258

于 2023-04-14 17:26:26 发布

阅读量478

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/Y4258/article/details/130158198

版权

文章讲述了在Vue.js应用中如何使用window.open打开新页面，并传递路由参数。新页面通过监听localStorage事件，在特定条件下调用方法更新数据并关闭页面。同时，提到了在mounted生命周期钩子中不能直接调用methods的问题，以及解决方案是保存this的引用以供后续使用。

摘要由CSDN通过智能技术生成

页面一：window.open()打开新的页面

        const routeData = this.$router.resolve({
          name: 'HMI',
          query: {
            id: 0 //路由参数
          }
        })
        window.open(routeData.href, '_blank')

页面二:window.close() 关闭网页

现在回到了新页面跳转前的页面
需要注意：mounted中不能调用methods，重新定义this的指向，通过定义后的this去调用methods

页面三：

  mounted() {
    const _this = this
    window.addEventListener('storage', function(e) {
      if (e.key === 'camTrue' && e.newValue) { // 1.key值要
        _this.init()  // 更新数据
        localStorage.removeItem('camTrue')  //清除对应的key
      }
    })
    }
    ```