[ Vue.js ] - Hacker News 2

동적 라우터

유저의 아이디를 클릭하면 해당하는 유저의 정보가 나타나도록 라우터를 설정하려고 한다.

routes/index.js

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

NewsView.vue

<small>
  {{item.time_ago}} by
  <router-link v-bind:to="`/user/${item.user}`">			          {{item.user}}
  </router-link>
</small>

router-link를 사용해서 path에 /user + 유저 아이디를 적용시키면 UserVuew에서 해당하는 유저의 정보를 가져올 수 있다.

개발자 도구에서 데이터가 잘 받아진걸 확인했다.

해당하는 유저를 인자로 받아 데이터를 가져오는 API호출 함수를 작성한다.

api/index.js

function fetchUserInfo(userName) {
  return axios.get(`${config.baseUrl}user/${userName}.json`);
}

이제 받아온 데이터를 fetch해서 화면에 보여주는 작업을 위해 store에 FETCH_USER를 구현해준다.

store/index.js

FETCH_USER(context, name) {
      fetchUserInfo(name)
        .then(response => context.commit("SET_USER", response.data))
        .catch(error => console.log(error));
    }

UserView.vue

<template>
  <div>
    <p>name: {{userInfo.id}}</p>
    <p>karma: {{userInfo.karma}}</p>
    <p>created: {{userInfo.created}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.user;
    }
  },
  created() {
    const userName = this.$route.params.id;
    this.$store.dispatch("FETCH_USER", userName);
  }
};
</script>

유저 데이터를 가져와 화면에 뿌리는 동적 라우팅을 생성해봤다.