Spring + Vue.js에서 404 페이지 나타내기

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/index',
      redirect: '/',
    },
    {
      path: '/',
      component: () => import('@/views/MainPage.vue'),
    },
    {
      path: '*',
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});
 
export default router;
 

 

• Vue.js의 라우터에 위와 같이 작성했을 때 없는 URL 접근 시 404 페이지로 이동하게 끔 기대했지만 그냥 에러가 떴다.
• Vue-router 레퍼런스에는 다음과 같은 내용이 있다.

• 화면에서 a 링크를 클릭하면 뷰 라우터로 페이지 전환없이 컴포넌트 영역만 치환하여 포현하기 때문에 마치 URL을 이동한 것처럼 보인다. (Client Side Rendering)
• 하지만 URL을 직접 입력해서 접근할 경우에는 페이지를 서버에서 요청하고 응답을 받아 렌더링하게 된다. (Server Side Rendering)
• 그렇기 때문에 URL로 인한 404 페이지는 서버에서 요청받은 에러에 대한 매핑 정보(템플릿 정보)를 작성해주면 된다.
• 스프링의 경우에는 아래와 같이 web.xml에 DispatcherServlet에 404 발생시 NoHandlerFoundException을 발생시키고 이를 공통으로 예외 처리하는 클래스의 404 에러를 처리하는 메소드에 렌더링할 템플릿 이름을 추가해주면 된다.

<servlet>
    <servlet-name>appServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
    </init-param>
    <init-param>
        <param-name>throwExceptionIfNoHandlerFound</param-name>
        <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

@ControllerAdvice
public class CommonExceptionAdvice {
    
    @ExceptionHandler(NoHandlerFoundException.class)
    @ResponseStatus(HttpStatus.NOT_FOUND)
    public String handle404(NoHandlerFoundException ex) {
        return "index";
    }
}

[vue-router] SPA 방식 애플리케이션 운영 시 주의사항

[SPRING] 404 에러 페이지 처리