Question

我正在使用vue-router构建Vue.js应用程序。

从doc可以看到，在钩子beforeRouteUpdate中，我可以通过关键字this来完全访问组件：

请注意，beforeRouteEnter是唯一支持传递回调到下一个。对于beforeRouteUpdate和beforeRouteLeave，这是已经可用，因此无需传递回调，因此不支持：

所以我写了以下代码：

    ...
    methods: {
      ...mapActions({
        setFileDetails: 'setFileDetails',
        setActionParams: 'setActionParams',
        setSelectedFileId: 'setSelectedFileId',
      }),
      goToImportSource() {
        this.$router.push('/import');
      },
      openAnnotationsView(item) {
        this.$router.push(`/ingestion/queue/${item.id}`);
      },
    },
    beforeRouteUpdate: (
      to,
      from,
      next,
    ) => {
      this.setSelectedFileId(to.params.id);
      next();
    },
  };
</script>

但是我得到这个错误：

vue-router.esm.js?fe87:16 [vue-router] uncaught error during route navigation:

TypeError: _this.setSelectedFileId is not a function
    at VueComponent.beforeRouteUpdate (PageIngestionQueue.vue?3869:67)
    at boundRouteGuard (vue-router.esm.js?fe87:2080)
    at iterator (vue-router.esm.js?fe87:1943)
    at step (vue-router.esm.js?fe87:1717)
    at step (vue-router.esm.js?fe87:1721)
    at step (vue-router.esm.js?fe87:1721)
    at step (vue-router.esm.js?fe87:1721)
    at eval (vue-router.esm.js?fe87:1718)
    at eval (vue-router.esm.js?fe87:1964)
    at eval (routeRules.js?b464:9)

如果我在组件中的其他任何地方调用this.setSelectedFileId，它将起作用……我会丢失什么？

Answer 1

使用function() {}代替() => {}语法（后者将绑定this，而您在这里不需要）：

beforeRouteUpdate(to, from, next) {
  this.setSelectedFileId(to.params.id);
  next();
}

或

beforeRouteUpdate: function(to, from, next) {
  this.setSelectedFileId(to.params.id);
  next();
}

vue-router beforeRouteUpdate钩子无法访问`this`

1 个答案: