[Vue3] transition, mounted, router.push

transition

<transition name="fade">
  <router-link v-if="$route.fullPath == '/'" to="/project"></router-link>
</transition>

transition은 화면이 전환되며 나타나는 효과를 설정할 때 사용한다. name 속성에 사용하고자 하는 애니메이션 클래스를 설정한다. 

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-leave-active,
.fade-enter-active {
  transition: opacity 1s ease;
}

보는 것처럼 클래스 이름 뒤에 -시점을 붙이면 자동으로 애니메이션이 설정된다. 

---

mounted

<script>
  export default {
    mounted() {
      document.addEventListener("scroll", this.showToolBox);
    },
  };
</script>

mounted는 전체 화면이 렌더링된 후 실행할 동작을 정의한다. 

주의할 점은 Parent와 Child 컴포넌트에 모두 mounted가 있을 때, Child → Parent 순서로 mounted가 실행된다. 순서를 간략화하면 아래와 같다. 

---

$router.push

<template>
  <div @click="routeTo(...)">
  </div>
</template>

<script>
  export default {
    methods: {
      routeTo(path) {
        this.$router.push(path);
      },
    },
  };
</script>

 <route-link :to=...>가 $router.push로 작동한다. 즉, 특정 페이지로 이동할 때 사용한다.