1. vue-news app (Router, Component 생성)

news-app을 만들고 각 기법을 추가하며 리팩토링하는 방향으로 진행한다.

최종 사이트 미리보기
news-app 사이트

router는 이전 포스팅에서 이미 다룬 주제이니 자세한 설명은 생략하고 코드를 보며 설명을 진행하겠다.

이전 포스팅에서는 VUE-CLI 사용전 버전이고 현재는 VUE-CLI 사용 버전임을 참고

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 default 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',
      component: UserView,
    }
  ]
});

redirect : 특정 url의 접속을 다른 url로 변경하는 속성

ToolBar.vue

<template>
  <div class="header">
    <img src="../assets/logo.svg" alt="logo" class="logo">
    <router-link to="/news">News</router-link> |
    <router-link to="/ask">Ask</router-link> |
    <router-link to="/jobs">Jobs</router-link>
  </div>
</template>

router-link : router의 a태그 역할을 한다.

App.vue

<template>
  <div id="app">
    <tool-bar></tool-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import ToolBar from './components/ToolBar.vue';

export default {
  components: {
    ToolBar
  }
}
</script>

router-view : 라우팅된 컴포넌트가 표시되는 태그.

(branch: 3_api)

출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념