Vue.js 끝내기 No.5(Default Page, history mode 설정)

개요

인프런의 캡틴판교님의 Vue.js 끝내기 강의를 들으면서 VueRouter의 Default Page, history mode에 대해 정리

 

Default Page는 내가 Router에 등록하지 않은 URL에 접근하려 했을때 유저에게 존재하지 않는 페이지라는걸 알리기 위해 쓴다.

(밑의 path: '*' 부분)

// 외부에서 사용할 수 있게 모듈화
// default 는 하나만 내보내겠다 는 의미
export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/login', // 초기 진입 페이지 설정
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'), // login에 해당하는 페이지만 들고온다.
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
      path: '*', // 위에 없는 모든 URL에 대해 반응하겠다.
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});

 

 

히스토리 모드(mode: 'history')

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/login', // 초기 진입 페이지 설정
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'), // login에 해당하는 페이지만 들고온다.
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
      path: '*', // 위에 없는 모든 URL에 대해 반응하겠다.
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});

 

 

mode에 history를 설정하면 url에 있던 # 이 사라지면서 정상적인 URL? 인것 처럼 보인다.

하지만, 이렇게 하면 주의해야 할 점이 있는데 우리가 vue를 이용해 어떤 사이트를 배포하고 있다고 한다면

vue로 작성한 어플리케이션이 올라가 있는 웹서버가 있을것이다.(static으로 배포한것은 제외)

웹서버(apache, nginx, nodejs)는 클라이언트에서 라우팅 처리를 하고 있는 /login, /signup 같은 URL 정보를 알지 못한다.

그럼 어떻게 해야 할까?

/home, /login로 접근했을 때 서버에서 / URL로 돌려서 클라이언트 레벨의 라우팅이 처리가 되도록 설정해 주면 된다.

 

실제 방법은 이하의 공식문서 참조

https://v3.router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6

HTML5 히스토리 모드 | Vue Router