javascript - Vue - 如何访问 beforeRouteLeave 内的数据 - 在 Component Guard 中

Question

尝试访问 beforeRouteLeave 内的数据，但一切都是未定义

下面的代码

<template>
  ...
</template>

<style lang="scss">
  ...
</style>

<script>

  export default {
    name: 'blog-new',
    data() {
      return {
        isBodyChanged: false,
        isPublished: false,
        isTitleChanged: false,
      }
    },
    created() {
      ...
    },
    beforeRouteLeave: (to, from, next) => {
      console.log(this.isBodyChanged) //<--undefined
      if (this.isBodyChanged) {
        return next(false)
      } else {
        return next()
      }
    }
  }
</script>

Answer 1

您需要使用 ES5 函数而不是箭头函数。使用 ES5 函数将使 this 关键字等于组件的实例，而箭头函数使用 lexical scoping .

beforeRouteLeave: function(to, from, next) {
  if (this.isBodyChanged) {
    return next(false)
  } else {
    return next()
  }
}

但是，您也可以使用我认为很有帮助的简写。这与上面的计算结果相同。

beforeRouteLeave(to, from, next) {
  if (this.isBodyChanged) {
    return next(false)
  } else {
    return next()
  }
}