[Vue.js] 5. 라우팅

공식 라우터인 vue-router 를 사용해서 라우팅에 대해 알아보자

 

vue-router 설치

npm install vue-router

 

router 객체 생성

뷰 인스턴스 생성 객체에는 'router' 라는 속성이 있다.

Vue router 를 사용하기위해서는 이 속성을 통해 Vue router 객체를 넘겨줘야 한다.

 

main.js 안에 뷰 인스턴스를 생성하므로 이 안에 넣어주자

//main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router"

Vue.config.productionTip = false

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

 

이제 실제로 라우터 객체를 생성해보자.

위에서 import router from "./router" 를 통해 ./router 로부터 router 를 가져오므로 router/index.js 에 만들면 되겠다.

//router/index.js

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

// 뷰 어플리케이션에 라우터 플러그인을 추가한다.
Vue.use(VueRouter)

그리고 라우팅에 따라 렌더링할 컴포넌트 설정 객체도 정의한다.

이때 나는 각각의 view 를 views/ 에 별도로 만들어 관리하기로 했다.

<!--views/viewA.vue-->
<template>
    <div>
        <p>A view</p>
    </div>
</template>

이런식으로 B,C 도 생성했다.

 

마지막으로 VueRouter 클래스 함수로 라우터 객체를 생성한다.

// router/index.js
import Vue from "vue"
import VueRouter from "vue-router"

import viewA from '../views/viewA.vue'
import viewB from '../views/viewB.vue'
import viewC from '../views/viewC.vue'

// 뷰 어플리케이션에 라우터 플러그인을 추가한다.
Vue.use(VueRouter)


const router = new VueRouter({
    mode: "history",
    routes: [
      { path: "/", component: viewA }, // '/' 경로로 들어오면 viewA 실행
      { path: "/b", component: viewB }, // '/b' 경로로 들어오면 viewB 실행
      { path: "/c", component: viewC },
    ],
  })
  
export default router

• 5 - 7 줄 : import 를 통해 각각의 컴포넌트를 지역적으로 등록한다. 이게 가능한 이유는 모듈 시스템 ( 바벨, 웹펙 ) 을 사용해서 ES2015 문법을 동시에 사용하고 있기 때문이다.
• 13 - 20 줄
  • mode : 기본값은 "해쉬뱅 모드"다. 브라우져 history 객체의 pushState() API를 사용하기 위해서는 "history"로 모드값을 설정한다.
  • routes : 경로와 컴포넌트으로 이뤄진 컬렉션이다. 실제 이 맵을 보고 라우터가 경로에 따라 그에 맞는 컴포넌트를 렌더링한다. ex ) { path: "/", component: viewA } 의 뜻은 경로 '/' 로 가면 viewA라는 컴포넌트를 렌더링 해달라는 뜻이다.

라우터 뷰

이제 실제 출력될 부분을 설정해야한다. App.vue 가 루트 컴포넌트 이므로 여기에 라우터 뷰를 추가해보자.

//App.vue

<template>
  <div id="app">
    <h1>routing example</h1>
    <!-- 라우트 아울렛 -->
    <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name : 'App',
}
</script>

 

그럼 밑처럼 /B 경로로 가면 view B 가 출력되는것을 볼 수 있다.

 

라우터 링크

App.vue ( 부모 컴포넌트 ) 에 네비게이션 링크를 걸고싶은 경우엔 <router-link> 를 사용하면 된다. 이때 경로는 'to' 라는 속성을 사용한다.

 

물론 우리가 아는 <a> 태그를 사용할 수도 있지만, <router-link> 를 사용하면 전체 화면을 갱신하지않고 바뀐 부분만 다시 렌더링 해주기 때문에 <router-link> 를 더 선호한다.

<template>
  <div id="app">
    <h1>routing example</h1>

    <router-link to="/">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>

    <!-- 라우트 아울렛 -->
    <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name : 'App',
}
</script>