Vue에서 Routing 사용하는 방법

Vue

Routing(라우팅)이란 무엇인가?

라우팅이란, 웹 페이지간의 이동 방법을 말하며, 웹 앱의 형식 중 하나인 SPA에서 주로 사용한다.

라우팅의 장점은 화면 간의 전환이 매끄러워, UX를 향상 시킬 수 있다.

일반적인 웹(MPA)에서는 특정 행동(링크 클릭, 또는 특정 이벤트)를 한 후, 페이지를 이동하게 되면, 흰색의 빈 페이지가 깜박거린 후, 이동된 화면이 나타나게 된다. 이런 부분들을 라우팅으로 처리하면 깜빡러미 없이 매끄럽게 화면이 전환될 수 있다.


Vue에서의 라우팅

Vue 라우터는 Vue에서 라우팅을 할 수 있도록 지원하는 공식 라이브러리이다.


Vue에서 라우팅 설치 및 등록

<설치>

Npm install vue-router

<등록>

1
2
3
Import VueRouter from ‘vue-router’

Vue.use(VueRouter)


기본적인 Vue Routing 사용법

Vue 라우터 라이브러리를 사용하면, 2개의 tag를 사용한다.

  • <router-link to=“url">: 페이지 이동 태그로, 화면에서는 <a>로 표시되며 클릭하게되면, to속성에 입력한 URL로 이동
  • <router-view>: 페이지 표시 태그로, 변경되는 URL에 따라 해당 컴포넌트를 출력해주는 영역

기본적인 라우팅을 만들어보자. 위에 버튼 두개가 있는데, 왼쪽은 todo 페이지로 이동, 오른쪽은 user 페이지로 이동하는 라우팅을 만들어 보자.

(1) vue-router를 설치하고, router.js를 만들어 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Todo from './components/Todo.vue'
import User from './components/User.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/', component: Todo },
        {
            path: '/user',
            component: User,
        }
    ]
})

Todo와 User 컴포넌트를 만들고, import 한뒤, router 인스턴스를 생성하고, path와 path에 맞는 컴포넌트를 맵핑한다.

‘History’ mode는 기본적으로 url에 #이 들어가 있는데, 이를 제거해 준다.

(2) main.js에 등록하여, 전역에서 사용할 수 있게 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

Vue.config.productionTip = false

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

(3) App.vue에 라우터 링크를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
// App.vue
<section>
  <div>
    <router-link to="/"><button>Go to Todo page</button></router-link>
    <br>
    <router-link to="/user"><button>Go to User page</button></router-link>
  </div>
</section>

<br>

<router-view></router-view>

이렇게 되면, 각 버튼을 클릭하면, 각 버튼에 해당하는 path로 이동하여, path에 맵핑된 컴포넌트를 화면에 뿌려준다.


Nested 라우팅

Nested(중첩된) 라우터는 라우터로 페이지를 이동할 때, 최소 2개 이상의 컴포넌트를 화면에 나타내는 것을 말한다.
상위 컴포넌트 1개와 하위 컴포넌트 N개로 구성할 수 있다.

예를 들어, User 페이지에서 url에 따라, User의 Profile과 User의 Post를 각각 보여주는 라우터를 만들어보자.

(1) 두 개의 컴포넌트 UserProfile과 UserPost를 만들고, 상위 컴포넌트인 User에 그 하위 컴포넌트로 UserProfile과 UserPost를 라우팅으로 등록한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Todo from './components/Todo.vue'
import User from './components/User.vue'
import UserProfile from './components/UserProfile.vue'
import UserPost from './components/UserPost.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/', component: Todo },
        {
            path: '/user',
            component: User,
            children: [
                {
                    path: 'userProfile',
                    component: UserProfile
                },
                {
                    path: 'userPost',
                    component: UserPost
                }
            ]
        }
    ]
})

(2) 상위 컴포넌트인 User.vue에 다음과 같이 링크를 추가한다. 이때, 상위 컴포넌트에 <router-view></router-view>를 추가하여, 상위 컴포넌트내에서 그 하위 컴포넌트들이 화면에 보이게 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// User.vue
<template>
    <div class="user">
        <p>This is User page.</p>

        <br>

        <router-link to="/user/userProfile">UserProfile 컴포넌트로 이동</router-link>

        <br>

        <router-link to="/user/UserPost">UserPost 컴포넌트로 이동</router-link>

        <br>

        <router-view></router-view>
    </div>
</template>


동적 라우팅

동적 라우팅이란, 일정한 패턴의 URI 경로를 하나의 컴포넌트에 연결하는 방법이다. 일정한 패턴의 URI란, 예를 들어, projects 페이지에서 각 페이지별로 상세하게 보고 싶은데, 이때 URI를 projects/1, projects/2 이런식으로 각 프로젝트를 id로 구별하는 것을 말한다. 이를 하나의 컴포넌트(Projects.vue)로 연결하여 사용한다.

하나의 메인 페이지에서 어떤 링크(버튼 등)를 클릭하면, projects 페이지가 나오고, 그 projects 페이지에는 여러개의 프로젝트들이 보여진다. 그리고, 각 프로젝트를 클릭하면, 각 프로젝트에 대한 상세 정보가 나오게 한다. 이때, 클릭 시 라우팅의 URI는 projects/1 이런식으로 지정하여 만든다.

(1) 우선, store.js에서 dummy 데이터를 만들자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vuex.Store({
    state: {
        projects: [
            {
                id: 1,
                text: 'vue',
                completed: false
            },
            {
                id: 2,
                text: 'react',
                completed: false
            }
        ]
    },
    actions: {
    },
    mutations: {
    }
})

(2) router.js에서 Projects에 대한 path를 등록하고, 이에 대한 children으로써, Project에 대한 path를 등록한다. 이때, path는 ‘:id’로 등록한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Projects from './components/Projects.vue'
import Project from './components/Project.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/projects',
            component: Projects,
            children: [
                {
                    name: 'project',
                    path: ':id',
                    component: Project
                }
            ]
        }
    ]
})

export default router

(3) App.vue에서 Projects 페이지로 이동하는 라우터 링크를 작성한다. 그리고, 링크 클릭 시, Projects 페이지의 정보를 보여주기 위해, router-view를 아래에 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
// App.vue
<template>
    <div id="app">
    <p>This is main page</p>

        <router-link to="/projects"><button>Go to Project page</button></router-link>

      <br>

      <router-view></router-view>
    </div>
</template>

(4) Projects 페이지는 프로젝트가 나열되어 나오게 한다. 그리고, 각 프로젝트에 라우터 링크를 걸어, 그 링크를 클릭시, 클릭한 프로젝트에 대한 상세 정보가 나오는 Project 페이지가 나오게 한다. 이때, router-link에는 name과 params를 같이 넣어 주는데, 이는 router.js에서 등록한 그대로 작성하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Projects.vue
<template>
    <div>
        <p>Projects page</p>

        <div v-for="project in projects" :key="project.id">
            <router-link :to="{ name: 'project', params: { id: project.id } }">
                [ID: {{project.id}}] {{project.text}}
            </router-link>
        </div>

        <br>

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    computed: {
        projects () {
            return this.$store.state.projects
        }
    }
}
</script>

(5) 위에서 어떤 하나의 프로젝트를 클릭하면, 그 프로젝트 컴포넌트에서 작성한 화면을 보여준다.(Project.vue). 이때, this.$route.params.id로 id에 접근할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// Project.vue
<template>
    <div>

    <p>Project each view: {{ this.$route.params.id }}</p>

    </div>
</template>

<script>
export defualt {
}
</script>


Named 라우팅

Named 라우팅이란, 각 화면의 영역을 각각 용도, 모듈별로 구분할 수 있는데, 이때, 이름으로 구분하는 것을 말한다. 일반적인 웹 앱에서는 header, footer, body로 나누어 화면을 구성한다.

(1) App.vue에서 각 화면별로 이름을 지정하여 화면의 영역을 나눈다.

1
2
3
4
// App.vue
<router-view name="header"></router-view>
<router-view></router-view><!-- name을 지정하지 않으면, default -->
<router-view name="footer"></router-view>

(2) 각 화면에 대한 컴포넌트로 만든 뒤, router.js로 import 한다. 그리고, routes에 다음과 같이 지정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Body from './components/Body.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            components: {
                default: Body,
                header: Header,
                footer: Footer
            }
        }
    ]
})

‘Components’ 속성에 Key(router-view 이름)-Value(컴포넌트)로 등록하면, 컴포넌트에서 <router-view>에 각 컴포넌트의 화면이 보여진다.

이런 컴포넌트 구조는(Header-Body(default)-Footer) 모든 페이지의 기본형식이기 때문에, path를 ‘/‘로 사용하여, 기본페이지로 사용할 수 있다.