앞서 Vue Router를 활용해서 서버에서 데이터를 가져오는 작업을 다뤘었다. 그렇다면 이렇게 받아온 데이터를 가지고 다시 서버에 무언가를 전송하려고 하면 어떻게 해야 할까??

조금 더 쉽게 설명하면

1. News정보를 가져와서 화면에 뿌려주기 위해 라우터로 서버에서 데이터를 받아온다.

2. 근데 News 정보에 기자의 이름도 들어있는데, 이 정보를 이용해서 기자의 프로필 정보를 서버에서 받아오고 싶다.

3. 백엔드 API에 따라 다르겠지만, 예를 들면 http://octopus.com/user?id=alex 이런 식으로 서버에 요청을 전송하게 될 것이다. 그럼 다시 받아온 기자의 프로필 정보를 화면에 뿌려주는 작업이 진행될 것

4. 즉, 특정 페이지에서의 정보를 가지고 다음 페이지로 넘어갈 수 있게 해주는 것이 바로 동적 라우팅 매칭(Dynamic Route Matching)이다.

실습으로 알아보자!

1. src/views/UserView.vue(간단하게 새로 생성)

<template>
  <div>
    user
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. src/routes/index.js(유저 라우터 등록)

import Vue from "vue";
import VueRouter from "vue-router";
import { NewsView } from "../views/NewsView.vue";
import { AskView } from "../views/AskView.vue";
import { JobsView } from "../views/JobsView.vue";
import { ItemView } from "../views/ItemView.vue";
import { UserView } from "../views/UserView.vue"; //추가

Vue.use(VueRouter);

export const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/news",
    },
    {
      path: "/news",
      component: NewsView,
    },
    {
      path: "/ask",
      component: AskView,
    },
    {
      path: "/jobs",
      component: JobsView,
    },
    {
      path: "/item",
      component: ItemView,
    },
    {
			//추가
      path: "/user/:id",
      component: UserView,
    },
  ],
});

3. src/views/NewsView.vue(여기서 기자 이름 정보 받아오니까, 그 정보를 전달해 주기 위함)

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

<script>
export default {
  created() {
    this.$stroe.dispatch("FETCH_NEWS");
  },
};
</script>

<style></style>