[Nuxt.js] 동일 페이지 파라메터 변경

Nuxt.js를 이용해 페이지 이동 시 변수를 넘기는 방법은 2가지(qnery,params) 가 있습니다.

 

 아래와 같이 데이터를 넘길 수 있습니다.

this.$router.push({
    name: 'board-list',
    //URL 노출
    query: {
        boardType: "test1"
    },
    //URL 비노출
    param" {
        boardType: "test2"
    }
})

 

넘어온 데이터는 아래와 같이 확인 할 수 있습니다.

 

//query 데이터 확인
console.log(this.$route.query.boardType)
//board 데이터 확인
console.log(this.$route.params.boardType)

• query를 사용하면 데이터가 노출되지만 새로고침 시에도 데이터를 유지 시킬 수 있다.
• params를 사용하면 데이터가 노출되지 않아 보안성이 높지만 새로고침 시 데이터가 사라진다.

그렇다면 동일 페이지 내에서 URL 파라메터를 변경하고 이를 감지하는 방법은 뭐가 있을까요?

watch: {
    '$route.query': {
        handler: 'watchHandler',
        immediate: false
    }
}
methods: {
    watchHandler(){
        console.log("test")
    }
}

• 위의 코드를 사용하면 파라메터 변경 시 watchHandler 함수를 호출합니다.
• 여기서 중요하게 봐야할 부분이 immediate입니다. 이는 최초 렌더링 시 호출여부로 true를 하게되면 최초 렌더링 시 watchHandler 함수가 호출됩니다.