[Vue.js/nuxt] 페이지 이동 시 감지 후 이벤트 발생하기 (watch/router)

vue, nuxt $route 이동 감지하기

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때 

특정 페이지에서 이벤트를 발생해야되는 경우가 있다.

이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다.

 

🤔vue watch란?

watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다.

 

$route watch 샘플코드

<template>
...
</template>
<script>
    export default {
        ...
        watch: {
            $route: function (to, from) {
            	console.log(to)
                console.log(from)
            }
        }
    }
</script>

위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다.

to의 경우에는 현재 진입한 페이지의 속성이 나오며,

from을 찍어보면 과거에 나온 페이지를 확인할 수 있다.

 

결과화면

watch $route

콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과

과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있다.

 

해당 코드로 특정페이지에 진입했을 때 코드 실행이 가능하다.