Vue Router는 Vue.js 애플리케이션에서 페이지 네비게이션을 관리하는 것을 가능하게 해주는 라이브러리입니다. Vue Router를 설정할 때 사용할 수 있는 다양한 옵션이 있습니다. 여기에서는 Vue Router의 주요 설정 옵션을 살펴보겠습니다.

mode

mode 옵션은 브라우저의 History API를 이용하여 라우팅을 처리할 때의 모드를 지정합니다. 기본값은 “hash”이며, 다른 값으로 설정할 수도 있습니다. 예를 들어 “history” 모드는 실제 URL 경로를 사용하여 라우팅하며, “hash” 모드는 URL의 해시를 사용하여 라우팅합니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

base

base 옵션은 애플리케이션의 기본 URL을 설정합니다. 기본값은 “/”이며, 일반적으로 루트 URL을 가리킵니다. 그러나 서브 디렉터리에 애플리케이션을 호스팅하는 경우에는 해당 디렉터리를 설정해주어야 합니다.

const router = new VueRouter({
  base: '/myapp/',
  routes: [...]
})

routes

routes 옵션은 라우터의 경로와 컴포넌트를 매핑하는 역할을 합니다. 각 경로에 대해 표시할 컴포넌트를 지정하여 라우팅을 정의합니다.

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

scrollBehavior

scrollBehavior 옵션은 라우팅으로 화면을 스크롤할 때의 동작을 정의합니다. 예를 들어 새로운 라우트로 이동할 때마다 페이지의 상단으로 스크롤하거나 이전 위치로 돌아가는 등의 동작을 지정할 수 있습니다.

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

정리하자면, Vue Router의 설정 옵션들은 라우팅 모드, 기본 URL, 라우트 정의, 스크롤 동작 등을 커스터마이징할 수 있도록 해줍니다.

더 자세한 내용은 Vue Router 공식 문서를 참고하세요.