Vue单页面应用打开新的标签页,以及原标签页如何监听新标签页事件

单页面应用打开新的标签页

将vue-router和windwow.open结合使用。原理很简单,获取到需要跳转的地址,再把地址传递给window.open。

let newpage = this.$router.resolve({
      name: 'messageInfo',
      query:{
          objectType:1,
          infoId:id
      }
})
window.open(newpage.href, '_blank');

原标签页如何监听新标签页事件

新标签页面:(比如详情页面)
freshClueNum存入localStorage,设置值为当前时间,每当需要触发原页面事件时,就改变freshClueNum的值即可
localStorage.setItem('freshClueNum', new Date().getTime())
原标签页面:(比如列表页面)
通过监听storagefreshClueNum的变化来判断是否触发事件

mounted() {
    window.addEventListener("storage", ev => {
        if(ev.key === 'freshClueNum'){
           // 业务处理逻辑
        }
    })
}
posted @ 2021-11-03 16:07  木-鱼  阅读(2041)  评论(0)    收藏  举报