[Vue.js] Hacker News - 라우터 기본

라우터 설치 및 구현

설치

npm i vue-router --save 실행

// Terminal
jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-advanced/vue-news (master)
$ npm i vue-router --save

구현

1. src/routers/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";

Vue.use(VueRouter);

// export 할 경우 다른 JS파일에서 해당 변수를 참조하여 사용 가능
export const router = new VueRouter({
  // history mode : url 주소 내 #(해쉬) 제거
  mode: 'history',
  routes: [
    {
      // path : url 주소
      path: "/news",
      // component : url 주소로 갔을 때 표시될 컴포넌트
      component: NewsView,
    },
    {
      path: "/ask",
      component: AskView,
    },
    {
      path: "/jobs",
      component: JobsView,
    },
  ],
});

2. src/views/에 NewsView.vue, AskView.vue, JobsView.vue 생성

<!-- NewsView.vue -->
<template>
  <div>
      news
  </div>
</template>
<script> export default {} </script>
<style></style>

<!-- AskView.vue -->
<template>
  <div>
      ask
  </div>
</template>
<script> export default {} </script>
<style></style>

<!-- JobsView.vue -->
<template>
  <div>
      jobs
  </div>
</template>
<script> export default {} </script>
<style></style>

3. main.js에 index.js에서 작성한 VueRouter import

import Vue from 'vue'
import App from './App.vue'
// Vue Router import
import { router } from './routers/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // = router: router (ES6 문법)
  router
}).$mount('#app')

※ main.js에 import VueRouter from 'vue-router'하여 구현해도 무방하지만 main.js의 용도는 프로젝트의 청사진을 보기 위함이기 때문에 별도의 파일로 만들어 router를 관리하는것이 좋다.

라우팅 컴포넌트 표시

<router-view>

라우터 생성 시 정의한 페이지 요청 경로(path)에 따라 설정된 컴포넌트를 표시하는 태그

구현

App.vue 수정

<template>
  <div id="app">
    <!-- url에 따른 컴포넌트를 표시 -->
    <router-view></router-view>
  </div>
</template>

<script> export default {} </script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

결과 확인

localhost:8080/#/news 호출

localhost:8080/#/ask 호출

localhost:8080/#/jobs 호출

Redirect

사용자가 /a를 방문했을 때 /b로 대체된 다음 /b와 매칭되는 것

routes: [
  {
    // a 진입 시
    path: "/a",
    // b 로 리디렉션
    redirect: "/b"
  }
],

<router-link to="URL">

뷰 내부적으로 해당 태그를 <a>태그로 변경하여 페이지 이동 기능을 가진다.

구현

1. src/components/ToolBar.vue 생성

<template>
  <div>
    <!-- 지정한 url로 이동 -->
    <router-link to="/news">News</router-link>
    <router-link to="/ask">Ask</router-link>
    <router-link to="/jobs">Jobs</router-link>
  </div>
</template>
<script> export default {} </script>
<style></style>

2. App.vue 수정

<template>
  <div id="app">
    // 등록한 컴포넌트 사용
    <tool-bar></tool-bar>
    <router-view></router-view>
  </div>
</template>

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

export default {
  // ToolBar 컴포넌트 등록
  components: {
    ToolBar,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

결과 확인