B-TIL 04 : Vue Router

등장배경

현대 웹 앱 형태인 SPA에서 새로고침이나 링크를 직접 입력하지 않고 컴포넌트간에 이동을 쉽게 하기 위해 만든 라이브러리

SPA는 실제로는 하나의 웹페이지지만 여러개의 페이지가 있는 것 처럼 기능구현을 해야하므로 컴포넌트와 라우터가 필수적으로 사용된다.

뷰 라우터의 기능을 활용하면 중첩라우팅, 라우터 파라미터, 와일드카드 등 다양한 기능을 손쉽게 사용할 수 있게된다.

어떻게 쓸 까?

라우터와 컴포넌트를 배치하는 방법은 개발자마다 다양한 방법을 사용할 수 있지만 나는 공식문서를 참조해 기본적인 방식으로 레이어를 구성했다.

BasicVue(디렉토리 명)
- src
  - app.vue
  - index.html
  - index.js
	- router
		- index.js
	- components
		- home.vue
		- event.vue
        - product.vue
        - order.vue
- package.json
- .babelrc
- webpack.config.js

컴포넌트들을 라우터에 index.js에서 묶어서 최종적으로 app.vue에서 라우터 템플릿을 렌더링하는 방식이며, 따로 중첩라우팅등은 사용하지않았다.

router디렉토리에 index.js에 컴포넌트들을 묶어주는 방식은 다음과 같이 크게 두 가지가 있다.

첫 번째 : import

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home'
import Event from '../components/event'
import Product from '../components/product'
import Order from '../components/order'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/event',
      name: 'event',
      component: Event
    },
    {
      path: '/product',
      name: 'product',
      component: Product
    },
    {
      path: '/order',
      name: 'order',
      component: Order
    },
  ]
})

두 번째 : 객체화

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const Home = () => import(/* webpackChunkName: "home" */ '../components/home.vue')
const Event = () => import(/* webpackChunkName: "event" */ '../components/event.vue')
const Product = () => import(/* webpackChunkName: "product" */ '../components/product.vue')
const Order = () => import(/* webpackChunkName: "order" */ '../components/order.vue')

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/event',
      name: 'event',
      component: Event
    },
    {
      path: '/product',
      name: 'product',
      component: Product
    },
    {
      path: '/order',
      name: 'order',
      component: Order
    },
  ]
})
export default router

/src/index.js :
router를 import하고 vue에 라우터를 주입시켜서 사용이 가능하게끔 한다.

import Vue from 'vue';
import app from './app.vue';
import router from "./router";

new Vue({
    el: '#app',
    render: h => h(app),
    router
});

/src/app.vue :

<template>
<div id="app">
  <div>
    <div>
      <ul>
      <li><router-link to="/" exact-active-class="home">Home</router-link></li> [1]
      <li><router-link to="/event" exact-active-class="event">Event</router-link></li>
      <li><router-link to="/product" exact-active-class="product">Product</router-link></li>
      <li><router-link to="/order" exact-active-class="order">Order</router-link></li>
    </ul>
  </div>
  <router-view></router-view> [2]
</div>
</div>
</template>

[ 1 ] : 라우터 링크는 기본적으로 a태그의 속성을 띄며, a href 흡사하다. 해당 Home이라는 폰트는 링크화되면서 클릭을 한 순간 해당 주소에 맞는 컴포넌트로 렌더링이 된다.(물론 실제 링크이동이 아니라 싱글페이지므로 라우터가 그렇게 보이게끔 하는 것 뿐이다)

[ 2 ] : 라우터뷰로 표시된 부분에 렌더링이 되게 된다.