router.push跳转时触发intersect指令unbind钩子observer未定义报错求助

问题原因 #

这个报错是Vuetify内置v-intersect指令的已知历史bug，触发逻辑是你从Streamers列表页点击跳转到StreamerDetail页时，Streamers页面触发销毁流程，v-intersect的卸载钩子在访问内部observer实例时，实例已经被提前回收，就抛出了这个类型错误。因为报错是在页面跳转过程中触发的，所以会被带到新页面打印，你修改StreamerDetail的代码自然不会生效。

解决方法 #

1. 优先升级Vuetify版本
   这个bug在Vuetify 2.4.0及以上稳定版已经被官方修复，直接升级框架版本即可解决绝大多数场景的问题。

2. 无法升级的临时修复方案
   如果项目当前不允许升级框架，可以先找到Streamers页面中所有用到v-intersect指令的元素，在页面的beforeDestroy（Vue2）/beforeUnmount（Vue3）钩子中手动清理观测实例：

// Vue2 示例，写在Streamers页面的script中
beforeDestroy() {
  const intersectElements = this.$el.querySelectorAll('[v-intersect]')
  intersectElements.forEach(el => {
    if (el._observer) {
      el._observer.disconnect()
      el._observer = null
    }
  })
}

3. 应急规避方案
   如果暂时找不到问题代码，可以先在跳转的router.push处加catch吞掉无关报错，不影响正常业务逻辑：

// 把原有的跳转逻辑修改为
this.$router.push({name:'StreamerDetail', params: {id: xxx}})
  .catch(err => {
    // 仅过滤intersect相关的报错，其他错误正常抛出
    if (!err.message.includes('observer') && !err.message.includes('intersect')) throw err
  })

内容的提问来源于stack exchange，提问作者Milano