[Vue 스터디 #6] vue Router

• Spring 에서 controller 의 역할을 하는 모듈로서, vue-router 라는 라이브러리를 설치하여 사용한다.
• router 와 routes 설정이 필요하다.
  • 전역으로 router 를 사용하기 위해서는 createApp 으로 등록이 필요하다
• <RouterLink> : a 태그를 대신해서 사용하는 커스텀 컴포넌트
• <RouterView> : url에 맵핑된 컴포넌트 표기란

전역 등록

import { createApp } from 'vue';

import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

routes

// src/router/index.js
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];

router

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];
const router = createRouter({
  history: createWebHistory('/'),
  routes,
});

export default router;

History 모드

1. createWebHashHistory()

• 설명: 이 함수는 URL에 해시(#)를 사용하여 경로를 관리합니다. 예를 들어, http://example.com/#/about와 같은 형태로 URL이 구성됩니다.
• 장점: 서버 설정이 필요 없으며, 모든 브라우저에서 일관되게 동작합니다. 특히, 서버가 URL을 처리하지 않고 클라이언트 측에서만 라우팅을 처리할 때 유용합니다.
• 단점: URL에 해시가 포함되므로, SEO(검색 엔진 최적화)에 불리할 수 있습니다.

2. createWebHistory() : 주로 많이 사용

• 설명: HTML5 History API를 사용하여 브라우저의 주소 표시줄에 해시 없이 경로를 관리합니다. 예를 들어, http://example.com/about와 같은 형태로 URL이 구성됩니다.
• 장점: 해시가 없으므로, URL이 깔끔하고 SEO에 유리합니다. 현대적인 웹 애플리케이션에서 선호되는 방식입니다.
• 단점: 서버 설정이 필요합니다. 서버가 모든 경로를 애플리케이션의 진입점으로 리디렉션하도록 설정해야 합니다. 그렇지 않으면 페이지 새로고침 시 404 오류가 발생할 수 있습니다.
  • vue 는 Single Page Application 이기 때문에, 페이지 하나로 동작함
  • 그러므로, 서버의 api call의 response를 항상 index.html 처럼 인입점으로 리디렉션 해야함

3. createMemoryHistory()

• 설명: 메모리에 경로를 저장하여 URL을 변경하지 않고 라우팅을 관리합니다. 주로 서버 사이드 렌더링(SSR)이나 테스트 환경에서 사용됩니다.
• 장점: URL을 변경하지 않으므로, 서버 사이드 렌더링에서 클라이언트와 서버 간의 URL 동기화 문제를 피할 수 있습니다.
• 단점: 브라우저의 주소 표시줄에 경로가 표시되지 않으므로, 일반적인 클라이언트 사이드 라우팅에는 적합하지 않습니다.