[Vue.js] onActivated() 메소드를 활용한 페이지 활성화

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  activated() {
    // 페이지가 활성화될 때 호출됨
    this.message = '페이지가 활성화되었습니다.';
    // 데이터를 가져오거나 초기화 작업을 수행할 수 있음
  }
};
</script>

Vue.js 라우터에서 사용되는 onActivated() 메소드는 페이지가 활성화될 때 호출됩니다. 이 메소드는 Vue 컴포넌트의 라이프사이클 훅 중 하나로, 페이지가 활성화될 때 수행해야 할 작업을 정의하는 데 사용됩니다.

위 예제는 onActivated() 메소드를 사용하여 페이지가 활성화될 때 메시지를 업데이트하는 Vue 컴포넌트를 보여줍니다.

1. activated() 메소드 내부에서는 페이지가 활성화될 때 호출되는 함수를 정의합니다.
2. 이 예제에서는 message 데이터를 업데이트하여 페이지가 활성화되었음을 사용자에게 알립니다.
3. 페이지가 활성화될 때 데이터를 가져오거나 초기화 작업을 수행하는 등의 작업을 수행할 수 있습니다.

onActivated() 메소드를 활용하면 페이지가 활성화될 때마다 특정 작업을 수행하여 사용자 경험을 향상시킬 수 있습니다.