# Dynamic Router matching

API를 통한 상세페이지 랜더

[ Page in detail page of Dynamic Router matching code in Github ]

# detail page api setup order

1. new create detail page
2. created detail page of code info in router

{path:'',
  component:
}

3. this page component checked params(id) code

created(){
  this.$store.dispatch('');
}

# v-html:""

API로 받아올경우 html 태그들이 문서에 남겨져서 오는 경우가 있다. 이경우에

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

v-html을 사용하여 api를 담아내면 출력값에 html태그가 사라진다.
[ v-html 공식문서 ]
[ v-html과 데이터 바인딩 차이점 문서 ]

[ detail page AskView in a itemView & api styling code in Github ]

# Router transition

Router Paging의 버퍼링 부분을 자연스럽게 녹아들기 위한 transition효과 부여

//App.vue
<transition name="page">
  <router-view />
</transition>
<style lang="scss">
  /* Router Transition */
  .page-enter-active, .page-leave-active{
    transition: opacity .5s;
  }
  .page-enter, .page-leave-to{
    opacity: 0;
  }
</style>