[vue-news] 라우터 기본 - redirect 속성과 router-link

vue-router 구성정보를 url 입력이 아니라 link를 클릭했을 때 간단하게 페이지를 전환 해보자!

💻 redirect 속성

---

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';

Vue.use(VueRouter);

export const router = new VueRouter({
  routes: [
    {
      path: '/',
      // vue-router에서 기본적으로 제공된다.
      // 접속시 바로 출력되는 컴포넌트 지정
      redirect: '/news'
    }
    {
      path: '/new',
      component: NewsView,
    },
    {
      path: '/ask',
      component: AskView,
    },
    {
      path: '/jobs',
      component: JobsView,
    },
  ]
});

💻 router-link

---

1. /component/ToolBar.vue 생성
2. App.vue에서 import

<template>
  <div id = "app">
    // ③ 컴포넌트 등록
    // 1 - Strongly Recommended
    <ToolBar></ToolBar>
	// 2 - Essential
    <tool-bar></tool-bar>
    <router-view></router-view>
  </div>
</template>

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

export default {
  // ② 컴포넌트 연결
  components: {
    ToolBar
  }
}
</script>

2. ToolBar.vue

<template>
    <div class="header"> 
        <router-link to="/news">News</router-link> |
        <router-link to="/ask">Ask</router-link> |
        <router-link to="/jobs">Jobs</router-link>
    </div>
</template>
<style scoped>
.header {
    color: white;
    background-color: #42b883;
    display: flex;
    padding: 8px;
}
.header .router-link-exact-active {
    color: #35495e;
}
.header a {
    color: white;
}
</style>