Vue-Router

1. Vue-Router란?

• Vue의 공식 클라이언트 사이드 라우팅입니다. 클라이언트 사이드 라우팅은 싱글 페이지 애플리케이션(SPA)에서 사용자가 보는 콘텐츠에 브라우저 URL을 연결하는데 사용됩니다. 사용자가 애플리케이션을 탐색함에 따라 URL이 적절하게 업데이트되지만, 페이지를 서버에서 다시 로드할 필요가 업게 됩니다.

2. 기본 예제

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>

RouterLink와 RouterView를 사용하는 템플릿으로 RouterView 컴포넌트는 현재 라우트 컴포넌트를 렌더링할 위치를 Vue Router에 알려주는 역할을 합니다.

router/index.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,
})

routes옵션은 라우트 자체를 정의하고 URL경로를 컴포넌트에 매핑합니다. component 옵션으로 지정된 컴포넌트는 RouterView에 의해서 렌더링될 컴포넌트입니다. history 옵션은 라우트가 URL에 어떻게 매핑되는지, 그 반대의 경우에 대해서도 제어합니다.

Composition API

• Vue Router는 Composition API와 Options 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>

3. Navigation Guards

1) 전역가드

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

• to(라우트): 대상 Route 객체로 이동합니다.
• from(라우트): 현재 라우트로 오기전 라우트 입니다.
• next(함수): 훅을 해결하기 위해 호출되어야 합니다.
  • next(): 파이프라인의 다음 훅으로 이동한다.
  • next(false): 현재 네비게이션을 중단합니다. 브라우저 URL이 변경되면 from 경로의 URL로 재설정됩니다.
  • next('/) or next({path: '/'}): 다른 위치로 리디렉션합니다.
  • next(error): next에 전달된 인자가 error의 인스턴스이면 탐색이 중단되고 router.onError()를 사용해 등록된 콜백에 에러가 전달됩니다.

2) 라우트 별 가드

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3) 컴포넌트 내부 가드

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트 앞에 호출됩니다.
    // 이 가드가 호출 될 때 아직 생성되지 않았기 때문에
    // `this` 컴포넌트 인스턴스에 접근 할 수 없습니다!
  },
  beforeRouteLeave (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트가 이전으로 네비게이션 될 때 호출됩니다.
    // `this` 컴포넌트 인스턴스에 접근 할 수 있습니다.
  }
}

참조

https://v3.router.vuejs.org/kr/guide/#html