[Vue.js] Vue router 시작하기

Vue router란?

vue.js의 공식 라우터로서 SPA를 쉽게 만들 수 있게 도와주는 아주 중요한 기능을 갖고 있다.

기본적으로 컴포넌트 기반의 라우터(URL)를 지정할 수 있고 세밀한 네비게이션 컨트롤이 가능하다.

 

본인은 CLI를 통하여 Vue 프로젝트를 시작했기때문에 vue router가 자동적으로 설치되었다.

CLI를 통한 설치는 아래의 링크를 참고하길 바란다. 

2020.12.20 - [Vue.js] - [Vue.js 시작하기] - Vue.js 설치

[Vue.js 시작하기] - Vue.js 설치

 

Vue router mode

vue router의 기본 모드는 hash mode이기 때문에 프로젝트 처음 시작 시에 모든 URL을 hash 형태로 서비스하는 것을 볼 수 있다. 이는 URL이 변경될 때 페이지가 다시 로드되지 않는다.

 

mode 옵션에 history를 넣어주게 되면 SPA의 형태로 URL이 정상적으로 보이게 된다.

 

중첩 라우트

실제 UI는 여러 개로 중첩된 컴포넌트로 이루어져 있다. 인스턴스를 레고 판이라 비교하고 컴포넌트를 그를 구성하는 레고들로 비교한다면 이는 당연하다는 것을 알 수 있다.

 

만약 /index, /hello 라는 URL에 appBar만 같고 main contents가 들어가는 부분만 다르다면,

이때 vue-router를 사용하여 매우 간단하게 중첩된 구성을 표현할 수 있다.

  <template>
    <v-app>
      <v-app-bar> project name </v-app-bar>

      <!-- main -->
      <router-view />
    </v-app>
  </template>
</template>

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
    	{
        	path: '/index',
            component: () => import('@/components/index.vue')
        },
    	{
        	path: '/hello',
            component: () => import('@/components/hello.vue')
        },
    ]
})

로컬이라고 가정했을 때

localhost:8080/index에는 같은 appBar, index 만의 contents,

localhost:8080/hello에도 같은 appBar, hello 만의 contents가 보이게 된다.

 

네비게이션

다른 URL로 이동하기 위해서 (예시로 메뉴의 버튼을 누르면 해당 메뉴로 페이지가 이동하는 기능,,,) 라우터의 여러 인스턴스 메소드를 사용하여 네비게이션 기능을 수행할 수 있다. 

 

router.push(location, onComplete?, onAbort?)

다른 URL로 이동할 수 있고 새로운 항목을 기록 스택에 넣기 때문에 사용자가 브라우저에서 뒤로 가기를 하게 되면 이전의 URL로 이동하게 된다. 

//router config에 미리 명시는 되어있어야함

router.push('/home')

router.push({path: '/home'})

 

router.replace(location)

push와 같은 역할을 하지만 새로운 기록 항목에 추가하지 않는다. 현재 항목을 대체하는 것뿐이다.

 

router.go(n)

방문 URL 스택에서 앞으로 또는 뒤로 이동할 수 있다.

router.go(1)
// 1단계 앞으로

router.go(-1)
// 1단계 뒤로

router.go(100)
// 100단계 앞으로, 만약 n만큼의 기록이 없으면 자동으로 실패한다.

 

 

위의 기능들뿐 아니라 상세한 조건별 네비게이션도 가능하지만 이 글에 있는 것으로 라우트의 주요 기능은 가능하니 이는 다음에 추가적으로 다루도록 하겠다.