뷰는 - 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에 함수를 추가해야합니다.