Vue - 如何在 beforeRouteLeave - In Component Guard 中访问数据

Question

尝试访问 beforeRouteLeave 中的数据，但一切都undefined

下面的代码

<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 关键字等于组件的实例，而箭头函数使用词法作用域。

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()
  }
}

Answer 2

正如

多米尼克所说。此外，您还应该在 methods 中添加您的函数。

Answer 3

对我来说我

更改库从

"vue-router"： "^2.0.1"

自

"vue-router"： "^3.0.1"

版本 2 有错误：https://github.com/vuejs/vue-router/issues/1288