기본적인 폴더구조, 컨벤션

• src
  • api : Axios 콜
  • components : 비즈니스 로직 등이 담긴 컴포넌트
  • routes : index.js 로 정의 라우터 정보 기입
  • store : 도메인 경계별로 모듈화 , index.js 에서 통합
  • views : 비즈니스 로직을 제외한 라우터에 등록할 컴포넌트기입
  • vue.config.js : webpack.config.js 파일의 설정을 하는 파일

---

 

Router 의 동적 주소 매칭

• 백엔드 API 와의 호출을 위한 경로 변수, 쿼리스트링을 사용하기 위해서 제공
• 경로변수의 경우 :name 형태로 기입
• <router-link to=""> 에서 변동되는 데이터를 넘겨주면 해당 컴포넌트에서 param 으로 받을 수 있다.

// rourte -> index.js
{
            path: '/user/:id',
            component: UserView,
        }
        

<!-- 넘겨줄때의 동적 경로 매핑 -->

<p :key="news.id" v-for="(news) in this.GET_NEWS" >
        <a :href="news.url" target="_blank" >
          {{news.title}}
        </a>
        <small>
          {{news.time_ago}} By 
          <router-link :to="`/user/${news.user}`">{{news.user}}</router-link>
        </small>
      </p>

---

 

동적 경로변수를 받아오는 컴포넌트에서 해야 할 일

• created  등의 라이프사이클 훅에서 axios 등의 백엔드 콜
• $route.params , $route.querys 등으로 경로변수, 쿼리스트링 확인 가능
• 가져온 변수를 axios 에 바로 태워 연결

<template>
  <div>
    USer
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.params.id)
  }
}
</script>

<style>

</style>