Vue 라우터

Vue Router는 vue의 공식 클라이언트 사이드 라우팅 솔루션

 

클라이언트 사이드 라우팅은 싱글 페이지 애플리케이션(SPA)에서 사용자가 보는 콘텐츠에 브라우저 URL을 연결하는 데 사용

사용자가 애플리케이션을 탐색함에 따라 URL이 적절하게 업데이트되지만, 페이지를 서버에서 다시 로드할 필요는 없음

App.vue

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>현재 라우트 경로:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">홈으로 가기</RouterLink>
    <RouterLink to="/about">소개로 가기</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

 

Vue Router 에서 제공하는 두 컴포넌트

RouterLink - <a> 태그 대신 사용

RouterView - 현재 라우트 컴포넌트를 렌더링할 위치를 Vue Router에 알려줌(현재 URL 경로에 해당하는 컴포넌트)

굳이 App.vue에 있을 필요는 없으며, 레이아웃에 맞게 어디에든 배치할 수 있지만, 어딘가에 포함되어 있어야함

그렇지 않으면 Vue Router가 아무것도 렌더링 하지 않음 

 

 

라우터 인스턴스 생성

router.js 

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,
})

 

라우터 인스턴스는 createRouter() 함수를 호출하여 생성됨

routes 옵션은 라우트 자체를 정의, URL 경로를 컴포넌트에 매핑

component 옵션으로 지정된 컴포넌트는 이전의 App.vue 에서 <RouterView> 에 의해 렌더링될 컴포넌트

history 옵션은 라우특다 URL에 어떻게 매핑되는지, 그리고 그 반대의 경우에 대해 제어

예제에서는 createMemoryHistory를 사용하지만 실제 애플리케이션에서는 createWebHistory()나 createWebHashHistory()

를 사용

 

라우터 플러그인 등록

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

 

 

Options API

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

 

 

Composition API

<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>

 

예제

https://play.vuejs.org/#eNqFVVtv2zYU/itn6gArmC05btEHTXXTFcWyYZeiLfYy7UGWji02EsmRlOPA8H/fIambnaRD4Fg61++c7yN9DJqc8eirDpKANVIoA0coFOYG30kJJ9gq0cBs3+Is412AEq1B1Xmi2L+ObpvX+3IpI5+b8aFqSJ+rjANErcbQp/v3RrTchLMXlDa7CuZBl07YUoONrCl/bQPT6np9i3UtbLPv0phenVm6L3rQRgm+W79vlULeIQaZmypJ484HxyN87xzRtq3rj+SE08mViX2dlOf7vuAnh/I3xu/AiDdZEGfB+mdBz3ArGkzj0f9sRr4hy5D2zr49ykvjvmdqeTmv9RfDe4i7uM6dxsNiaF9+l0+y+Ts2Qj3cMm3oa94Zfd0py4uBzYFPO6Br3ZPaGzpme9rtQGdxg2WUgOC6Y0PDG/jbjnL0vMAsnhEsQcU4UZaMbU/z8zC3x/PYsbcN/ueilaJW03nDoy1Y+VUkT+0nvHI9PVB6PJE8M44HN2iJ27yt+9q09ek+rFR1oZg0RM5FgmvboKlEqRP/BrATX4SDH171JgBD4CIvThXJVldhP7Y7J9DtxP4nxZKk+470cnFQVuseHh2TlTduWmMEh5uiZsUdSXPAcKlOH/hIZmfEjhODRtPaozNKjyiiGcqn75Ej0Pl3lMyHp2fFeMHnEB/SRia+ict6ep/GXBWV1UGHyGtgh5O1K0KvuC8T/duieoi6tLdvYUYg+rXTmKH3jLmeKoW0owLDI7h8IrnvfAKrIargxfQ/lA0LHjmr8w3W3X3w2dVMIGWchoH9ohEl1pFRrCE2fccsgCY/1Mh3piLjaknc+pujr3TOqedk0eSSrg/BiVU3WtY5dBYMks2CkRtrzoLKGKmTOG65vNtFtON4jLh5Fb2MlnFJJ2tijVA3i40S99rdV1ngNmtr31BQXOLeCFHrRS7Zcy0eBd68jl5H13HNNjFVjxkv8eBq94unMY0mQWzZ7mJIKwtWo/pTGkaCORs2p9+Z+1+dzagWB6BFhcXdE/av+uAhf1RI0+1xMpzJFWnOuz98/gMP9Dw4icW2puhvOD+hFnVrMfqwn1peEuxJnEP7i+OM8d0X/eFgkOt+KAt0FLIj8v03Rh/hvoxeTbaozUONOiq0/aGhX6w5aY1xn7cRqkSVwEoegMCyEl4sl8sf3d1H5RhfbATdKk0C10t5cHaZlyWBHSzUJeNUFtaQww/08Tenz65xSzf+NLJaTTuP5UcARVFMACSwpL9VVyE4/QesCg/V

Vue SFC Playground

 

 

가이드

 

https://router.vuejs.kr/guide/

Vue Router | Vue.js의 공식 라우터