라우터 params를 이용한 user 상세페이지 구현 (예시O)

 

현재 상황

: api 데이터를 axios로 불러와 각 component들에 뿌려줌

 

구현하고 싶은 것

: news, ask 카테고리안에 있는 데이터들 중에

title 옆 작성자를 클릭하면 작성자 정보가 나오는 페이지 구현

 

---

1. UserView.vue 컴포넌트 생성

 

2. NewView.vue에 출력한 작성자 클릭 시 작성자 정보가 넘어갈 수 있게끔

router-link를 통해 userId를 router에 보내줌

<template>
   <div>
      <p  v-for="item in this.$store.state.news" :key="item">
         <a v-bind:href="item.url">{{ item.title }}</a>
         <small>{{item.time_ago}} by
            <router-link :to="`/user/${item.user}`"> {{item.user}} </router-link>
         </small>
      </p>
   </div>
</template>

Q. a 태그 안에 href로 잡아주는것과 router-link를 사용하는것과는 어떠한 차이가 있나요?

A. 뷰 라우터를 사용하실 때 a 태그가 아닌 router-link 태그를 사용하셔야 라우터에서 제공하는 속성과 API를 모두 사용하실 수 있습니다 :)

 

 

3. routes 폴더의 index.js에 UserView 컴포넌트 및 path 등록

import Vue from 'vue';
import VueRouter from 'vue-router';
import UserView from '../views/UserView.vue'

Vue.use(VueRouter);

export const router = new VueRouter ({
    mode : 'history', //url # 없애는 코드
    routes : [
        {
            path : '/user/:id',
            component : UserView
        },
    ]
});

*Userview path 에 id값을 받아올 수 있도록 변수 정의해둠

ex) path : '/user/:id'

 

 

3. UserView.vue component에서 router params를 통해 전달받은 userId를

dispatch를 통해 store의 actions에 전달해줌

<script>

export default {
  created(){
    const userId = this.$route.params.id;
    this.$store.dispatch('FATCH_USERS', userId)
  }
}
</script>

 

4. actions.js에서 전달받은 userId값을 api에 넘겨주고 userId와 일치하는 api 데이터 값을 받아옴

 

-actions.js

import { fetchUserInfo } from '../api/index.js'

export default {
 FATCH_USERS(context, userId){
        fetchUserInfo( userId )
            .then(response => context.commit('SET_USERS', response.data))
            .catch(error => console.log(error))
    }
 }

-api폴더 index.js

import axios from 'axios';

//1. HTTP Request & Response와 관련된 기본 설정
const config = {
    baseURL : 'https://api.hnpwa.com/v0/'
};

function fetchUserInfo(userId){
    return axios.get(`${config.baseURL}user/${userId}.json`)
}

export {
    fetchUserInfo
}

 

5. 데이터를 전달받은 mutations에서 state 데이터 값을 변경해줌

export default {

        SET_USERS(state, userData){
            state.user = userData;
        }
     
}

 

6. UserView.vue component로 돌아와 전달받은 데이터를 화면에 뿌려줌

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

<script>
//import axios from 'axios';


export default {

  computed : {
    userInfo(){
      return this.$store.state.user;
    }
  },
  created(){
    const userId = this.$route.params.id;
    this.$store.dispatch('FATCH_USERS', userId)
  }
}
</script>

 

-출력 화면