文章/答案/技术大牛

发布

社区首页 >问答首页 >vue-路由器beforeRouteUpdate钩子无法访问“`this`”

问vue-路由器beforeRouteUpdate钩子无法访问“`this`”
EN

Stack Overflow用户

提问于 2018-06-28 12:32:17

回答 1查看 2.9K关注 0票数 1

我正在使用vue-路由器构建一个Vue.js应用程序。

从文档中，我可以读取钩子beforeRouteUpdate中通过关键字this对组件的完全访问。

请注意，beforeRouteEnter是唯一支持将回调传递给next的保护机制。对于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，那么works...what是否丢失了？

javascript

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-28 12:35:48

使用function() {}而不是() => {}语法(后者将绑定您不想要的this )：

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

或

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51083017

复制

相似问题

问vue-路由器beforeRouteUpdate钩子无法访问“`this`”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vue-路由器beforeRouteUpdate钩子无法访问“`this`”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vue-路由器beforeRouteUpdate钩子无法访问“`this`”
EN