[Vue.js] Vue Router과 간단한 사용법

Vue Router이란?

---

 vue.js의 확장 라이브러리로 Vue Router을 사용하는 것으로 싱글 페이지 어플리케이션(SPA)를 구축할 수 있다.

 Vue Router를 이용하여 싱글 페이지 어플리케이션을 구축하면, 어떤 페이지에서 다른 페이지로 이동할 때에 페이지 전체의 정보를 읽어들일 필요가 없어진다.

 페이지간에 공통 부분은 변경이 일어나지 않고 페이지 내에 달라지는 부분이 기재되어 있는 부분만 바뀐다. 예를 들어, header나 footer, sidebar가 있는 사이트의 경우, 공통된 정보가 있으므로 갱신에 필요하지 않은 정보는 매번 다시 읽어들이지 않게 된다. 그러므로 싱글 페이지 어플리케이션에서는 페이지의 이동이 스무스하게 된다.

 

 

도입 방법

---

1. 메뉴얼 셋업

(1) npm으로 설치한다.

npm install vue-router

(2) router.js를 작성한다.

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home/'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

패스 /에 액세스하면 <router-view>안이 Home 컴포넌트로 바뀐다. 또한, 기본적인 동작으로는 URL에 #가 포함되어 있지만, mode:history를 지정하여 URL에서 hash를 제거할 수 있다.

3. 엔트리포인트가 되는 JavaScript 파일에 추가로 기재한다.

// scr/main.js

import router from './router' //추가

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

플러그인으로서의 사용을 선언하는 것으로, router.js를 다른 컴포넌트처럼 import하는 것이 아닌, this.$router로 Vue Router에 액세스하는 것이 가능하다.

 

Vue CLI3에 의한 셋업

Vue CLI3를 사용하고 있는 경우는 vue create를 할 때에 vue-router를 선택하면 프로젝트 초기화할 때 자동적으로 도입이된다. 또한, vue add vue-router로 나중에 추가하는 것도 가능하다.

 

 

사용법

---

 루팅 제약에 따라 표시하고 싶은 컨텐츠의 장소에 <router-view>태그를 기재한다.

<!--src/App.vue-->
<template>
  <div id="app">
    <global-header/>
    <router-view/>
    <global-footer/>
  </div>
</template>

<script>
import GlobalHeader from './components/GlobalHeader'
import GlobalFooter from './components/GlobalFooter'

export default {
  components: {
    GlobalHeader,
    GlobalFooter
  }
}
</script>

 예를 들어, 위와 같이 작성하면 헤더, 풋터는 보통의 공통된 것이 표시되며, 패스가 변경되면 그 사이에 위치한 <router-view/>안의 내용이 루트에 매치되는 컴포넌트로 다시 랜더링된다.

 

페이지 이동

router-link 컴포넌트의 이용

<router-link to="/">Go to home</router-link>

이동할 곳을 to 속성으로 값을 지정한다. <router-link> 태그는 <a> 태그로서 렌더링된다.

프로그램적인 이동

this.$router.push('/')

 Script 안에 위와 같이 작성하면, 앞서서 기재한 <router-link>태그를 클릭하느 것과 같게 된다.

this.$router.replace('/')

라고 작성하면, history에 추가하지 않고 이동을 할 수 있게 된다(브라우저의 이전 페이지, 다음페이지 버튼을 이용하여 이동했을 때의 동작과 다르다). 

 

 

그 외 Tips

---

1. Dynamic Import

맨 처음 로드의 부담을 줄이기 위해서 Webpack의 Code Splitting을 이용한 Dynamic Import를 사용할 수 있다.

// src/router.js

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

Vue.use(Router)

function loadView (view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

 위와 같이 코드를 변경하면 필요에 따라 컴포넌트가 지연되어 읽히게 된다.

 

2. 현재 패스 확인하기

this.$router.path

 임의의 컴포넌트에 위의 코드를 사용하면 현재 패스를 확인할 수 있다.

 

3. 화면 이동후 스크롤 제어하기

 // scr/router.js
 
 routes: //...생략,
 scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

 예를 들어 루터 오브젝트내에 위의 코드를 추가하면 페이지 이동때마다 스크롤이 상단으로 돌아가는 동작을 하게 된다. savedPosition은 오브젝트로 지정하면 이전 페이지/다음 페이지 버튼으로 이동했을 때, 그 페이지에 있던 상태의 스크롤을 재현한다.

 

4. 인증을 확인하기

 인증이 끝난 어떠한 것을 요구하는 페이지 컴포넌트에 대해서는 아래와 같이 루트 메타  필드를 추가한다.

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/sign-in',
      name: 'sign-in',
      component: loadView('PageSignIn')
    },
    {
      path: '/',
      name: 'home',
      component: loadView('Home'),
      meta: { requiredAuth: true } //Home컴포넌트의 표시하기 위해서는 인증이 필요하다고 정의
    }
  ]
})

 루터 메타 필드의 requiredAuth 속성이 true인 경우, 인증되어 있는지 아닌지를 체크하는 동작이 구현된다.

main.js에 네비게이션 가드를 아래와 같이 추가한다.

// scr/main.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiredAuth)) {
    Auth.currentAuthenticatedUser() // 인증된 유저가 존재하는가 아닌가를 체크하는 함수
      .then(() => {
        next()
      })
      .catch(error => {
        console.error(error)
        next({
          path: 'sign-in',
          query: {redirect: to.fullPath}
        })
      })
  }
  next()
})

 그럼 다음과 같은 동작을 하게 된다.

(1) 인증 체크

 이동하게 될 페이지의 루트에 requireAuth가 true뢰 되어 있는 경우, Auth.currentAuthenticatedUser()가 실행된다.

(2) 인증 체크 결과를 바탕으로 페이지 이동의 실행

 인증된 유저가 존재하는 경우, 정상적으로 페이지 이동이 이루어진다. 인증된 유저가 존재하지 않은 경우, 로그인 페이지에 리다이렉트된다.

---

참고자료

https://qiita.com/hshota28/items/765cf903f055754f7557

https://reffect.co.jp/vue/first-time-vue-router