Vueが - beforeRouteLeave内のデータにアクセスする方法 - beforeRouteLeave内のデータにアクセスするようにしようとコンポーネントガード

Question

ではなく、すべてが

<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

以下undefined

コードであるあなたは、矢印の機能の代わりに、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() 
    } 
} 

Answer 2

ドミニックと同様です。また、methodsに関数を追加する必要があります。