VueRouter의 Router Instance 파헤치기

Basic Router Tag

간단한 것들만 배워보고 자세한 것들은 다른 게시글에서 상세하게 설명하겠습니다.

<router-link> or <RouterLink>

일반적으로 개발을 할 경우 <a>태그의 경우 현재 페이지에서 다른 페이지로 이동하거나, 페이지 안에서 다른 컨텐츠로 이동할 경우 사용하게 됩니다.
그 외의 클릭 이벤트의 경우는 <button>을 사용하죠.

<router-link> or<RouterLink> 태그를 사용하여 URL변경시 페이지를 다시 로드하지 않고 URL 생성, 인코딩 및 기타 다양한 기능을 처리할 수 있게 하는 컴포넌트를 사용합니다.

<template>
    <nav>
        <RouterLink to="/">홈</RouterLink>
        <RouterLink to="about">소개</RouterLink>
    </nav>
    <main>
        <RouterView />
    </main>
</template>

Create Router Instanace

각 URL에 맞게 페이지를 이동하려고 한다면 routes를 설정해 주어야 하는데요.
가장 우선이 되어야 할 건 Router의 Instanace를 생성하는 것입니다.
Router Instanace는 createRouter()를 호출하여 생성합니다.

import {createMemoryHistory, createRouter} from 'vue-router'

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
    { path: '/', component: HomeView },
    { path: '/about', component: AboutView },
]

const router = createRouter({
    history: createMemoryHistory(),
    routes,
})

Router Plug-In 등록하기

Router Instanace를 생성했다면 이제 App에 등록해 줄 차례입니다.

import { createApp } from 'vue'
import router from '@/router'
import App from '@/components/App.vue'

...

createApp(App)
    .use(router)
    .mount('#app')

// 다른 방법으로는

const app = createApp(App)
app.use(router)
app.mount('#app')

---

참고사항

이 플러그인은 다양한 일을 할 수 있습니다.
몇 가지 예를 들어보겠습니다.

1. RouterView와 RouterLink 컴포넌트를 전역으로 등록
2. 전역 $router와 $route속성을 추가
3. useRoute() 및 useRouter() 컴포저블을 사용할 수 있게 함
4. 초기 라우트를 해결하기 위해 라우터를 트리거

Options API방식과 Composition API의 경우 사용방법이 다른 것 처럼 해당 ㅂ아법에 따라 Router를 사용하는 방법이 다릅니다.

예를 들어보겠습니다.

다음은 Options API방식입니다.

export default {
    method: {
        goToAbout() {
            this.$router.push('/about),
        }
    }
}

Composition API방식에서는 this를 통해 컴포넌트 인스턴스에 대한 접근을 할 수 없습니다. 따라서 다음과 같이 사용합니다.

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
    get() {
        return route.query.search ?? ''
    },
    set(search) {
        router.replace( {query: { search } })    
    }
})
</script>

$router

• Router 인스턴스 ➡️ 웹 어플리케이션 전체에서 딱 "하나"만 존재
• 그렇기에 전반적인 라우터 기능을 관리한다.

프로퍼티 / 메서드명	설명
app	라우터를 사용하는 Root Vue 인스턴스
mode	라우터 모드
currentRoute	현재 라우트에 대한 Route 객체
push(location)	페이지 이동 실행 (히스토리에 새 엔트리 추가O)
replace(location)	페이지 이동 실행 (히스토리에 새 엔트리 추가X)
go(n)	히스토리에서 n 단계 이동
back()	히스토리에서 한 단계 돌아감
foward()	히스토리에서 한 단계 앞으로 감
addRoute(routes)	라우터에서 동적으로 라우트를 추가

$route

• Route 객체 ➡️ 현재 활성화된 라우트의 상태를 저장한 객체
• 페이지 이동 등으로 라우팅이 발생할 때마다 생성.

프로퍼티	설명
path	현재 라우트의 경로를 나타내는 문자열
params	정의된 URL 패턴과 일치하는 파라미터의 key-value 쌍을 담고 있는 객체
query	쿼리 문자열의 key-value 쌍을 담고 있는 객체
hash	현재 URL에 URL 해시가 있을 경우 라우트의 해시값을 갖는다. 해시가 없다면 빈 객체
fullPath	쿼리 및 해시를 포함하는 전체 URL
name	이름을 가진 라우트인 경우, 라우트의 이름