[vue.js] 동적 라우팅 & v-html & 트랜지션

1. 동적 라우팅 

     1) 페이지 전환시 기존 정보 가지고 가는 라우팅 기술

     2) 라우터에 가지고 갈 정보를 표시해주고, 실제 라우터 링크에서 값을 표기해 줌       

{
  path:'/user/:id',
  component: UserView,
},

아래와 같이 사용할 경우에는 라우터에 위와 같이 표기안해주어도 된다.

{
  path:'/user',
  component: UserView,
},

 <router-link :to="`/user/${fetchedItem.id}`">  //클릭시 페이지 이동시키고 싶을때 라우터 링크사용

 

2. v-html

  1) 서버로부터 받아오는 내용에 HTML이 포함되어있는경우 사용

<section>
  {{fetchedItem.content}}
</section>

 

<div v-html="fetchedItem.content">
</div>

3. 트랜지션

   1) 뷰에서 트랜지션 기능을 기본으로 제공해 준다.

   2) 트랜지션 이름 기준으로 css가  prefix되어 있기 때문에 트랜지션 이름 변경시 css도 이름에 맞춰서 변경해주어야 한다.

 //app.vue
 
 <transition name="page">
   <router-view></router-view>
 </transition>

(...중략)

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

참고자료 : https://kr.vuejs.org/v2/guide/transitions.html

진입/진출 그리고 리스트 트랜지션 — Vue.js

https://wanzargen.tistory.com/31

[Vue.js] 뷰 트랜지션(transition)의 사용 방법과 치명적인 문제점