vue-router beforeRouteUpdate hook не может получить доступ к `this`

Question

Я создаю приложение Vue.js, используя vue-router.

Из документа я могу прочитать, что внутри хука 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();
}