未捕获的类型错误：路由器推送 vueJs 后无法读取未定义的属性“$refs”答案

【问题标题】：Uncaught TypeError: Cannot read property '$refs' of undefined after router push vueJs未捕获的类型错误：路由器推送 vueJs 后无法读取未定义的属性“$refs”
【发布时间】：2021-04-15 02:45:18
【问题描述】：

我正在开发一个 vue 应用程序，我的功能是将其切换到其他页面并使用 $refs 加载对话框。但是，我不断收到错误 "Cannot read property '$refs' of undefined" 。我知道当路由器切换页面时，它会进入创建的钩子并且尚未加载参考。我怎样才能等到 refs 被加载？下面是我的代码！提前致谢！

openUpdateDetails(animalId) {
  this.$router
    .push(
      `/zoo/${
        this.$route.params.id
      }/animal/${animalId}/documents`
    )
    .finally(() => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs['panel'].$refs['animal-card'].handleAnimalDocument('change_animal');
        });
      });
    });
}

【问题讨论】：

或许您应该将该逻辑移动到相应组件的 mounted 挂钩中？
@Phil 页面位于两个单独的文件中
你能展示这两个模板（尤其是参考）吗？
这是我在router.push之后切换到的页面中的组件。 @tony19

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

我找不到直接等待组件安装的方法。但我找到了其他方法。

beforeRouteEnter(to, from, next) {
next(vm => {
  setTimeout(() => {
      vm.$refs['panel'].$refs['animal-card'].handleNewAmendment('change_animal');
  }, 200);
});

我在要切换到的页面的计算属性之前添加了这个块。希望这对其他人有帮助！

【讨论】：