🔗 동적 라우트 매칭 원리 및 적용

주어진 패턴에 따라 같은 컴포넌트에 라우트를 매핑해야 하는 경우가 있다. Vue Router 에서는 동적 세그먼트를 사용해서 작업 할 수 있으며 이를 파라미터 라고 한다.

✨ 라우트 매핑

const routes = [
  {
    path: '/user/:id',
    // 동적 세그먼트는 콜론으로 시작한다.
    component: UserView
  }
]

✨ 라우트 참조

this.$route.params.id;

🔗 라우터 params를 이용한 상세 페이지 구현

이전에 구현해 놓은 프로젝트에서 링크 클릭시 해당 링크의 id 값으로 페이지가 넘어가도록 처리하기 위해서 몇가지 단계를 거치면 된다.

① UserView.vue 컴포넌트 생성

② api 추가 및 store에 데이터 작업

📂 api/index.js

function fetchItem(id) {
    return axios.get(`${config.baseUrl}item/${id}.json`);
}

📂 store/index.js

export const store = createStore({
	actions: {
    	FETCH_USER({ commit }, name) {
            fetchUser(name)
            .then(({ data }) => {
                commit('SET_USER', data)
            })
            .catch(error => {
                console.log(error)
            })
        },
    }
})

③ UserView.vue 컴포넌트에서 라우터 불러오기

📂 UserView.vue

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

<script>
import { mapGetters } from 'vuex';

export default {
  // 일반적으로 computed를 먼저 작성해 줘야 한다. 
  computed: {
    ...mapGetters(['fetchedUser'])
  },
  created() {
    const userName = this.$route.params.id;
    this.$store.dispatch('FETCH_USER', userName)
  }
}
</script>

<style>

</style>

④ NewsView.vue에서 라우터 링크 연결

📂 NewsView.vue

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

🔗 v-html 및 라우터 트랜지션

✨ v-html

기존 javascript에서 HTML 내용을 그대로 넣을때 innerHTML을 사용했는데 vue 에서는 v-html을 통해서 사용 가능하다.

📂 ItemView.vue

<template>
  <div>
    <section>
        <router-link :to="`/user/${fetchedsItem.user}`">{{ fetchedsItem.user }}</router-link>
        <small>{{ fetchedsItem.time_ago }}</small>
        <h2>{{ fetchedsItem.title }}</h2>
    </section>
    <section>
        <div v-html="fetchedsItem.content">
            <!-- 내부는 비워놓아야 한다 -->
        </div>
    </section>
  </div>
</template>

✨ 라우터 트랜지션

<Transition> 을 통해서 컴포넌트의 탬플릿에서 사용 가능하다.

📂 App.vue

<template>
  <ToolBar></ToolBar>
  <transition name="page">
    <router-view></router-view>
  </transition>
</template>

<style>
  .page-enter-active,
  .page-leave-active {
    transition: opacity 0.5s ease;
  }

  .page-enter-from,
  .page-leave-to {
    opacity: 0;
  }
</style>