[javascript] Vue Router의 해시 라우팅 처리

18 Dec 2023

javascript

Vue.js 프레임워크에서 Vue Router를 사용하여 웹 애플리케이션을 개발할 때, 해시 라우팅(Hash Routing) 기능이 필요한 경우가 있습니다. 해시 라우팅을 통해 URL의 해시(# 뒷부분)를 사용하여 페이지를 동적으로 변경할 수 있습니다.

Vue Router와 Hash 모드

Vue Router에서 해시 라우팅을 사용하려면 hash 모드를 설정해야 합니다. hash 모드를 Vue Router에 설정하면 URL의 해시를 사용하여 페이지를 라우팅하게 됩니다.

const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 라우팅 설정
  ]
})

해시 라우팅의 장단점

장점

서버 측에서 URL이 변경되더라도 브라우저에서 페이지를 새로고침하지 않아도 됩니다.
웹 호스팅 서비스에서 SPA(Single Page Application)를 호스팅할 때 용이합니다.

단점

URL이 해시(#)를 포함하기 때문에 SEO(Search Engine Optimization)에 불리할 수 있습니다.
브라우저의 뒤로가기 버튼이나 새로고침을 사용하는 경우 페이지 로드 시 초기 상태로 돌아가거나 오작동할 수 있습니다.

해시 라우팅의 사용 예시

// 라우팅 설정
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

// Vue Router 생성
const router = new VueRouter({
  mode: 'hash',
  routes
})

해시 라우팅을 통해 URL에 따라 다른 페이지를 표시할 수 있습니다. 위 예시에서 /home 경로로 이동하면 Home 컴포넌트가, /about 경로로 이동하면 About 컴포넌트가 표시됩니다.

마치며

Vue Router를 사용하여 해시 라우팅을 처리하면 SPA 개발 시 간편하게 페이지를 관리할 수 있습니다. 하지만 SEO에 불리하고 브라우저의 뒤로가기 등에 대한 문제가 있으므로 상황에 맞게 사용해야 합니다.

Vue Router 공식 문서에서 더 많은 정보를 얻을 수 있습니다.