Notice
Recent Posts
Recent Comments
초코레
Spring + Vue.js에서 404 페이지 나타내기 본문
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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;
|
cs |
- Vue.js의 라우터에 위와 같이 작성했을 때 없는 URL 접근 시 404 페이지로 이동하게 끔 기대했지만 그냥 에러가 떴다.
- Vue-router 레퍼런스에는 다음과 같은 내용이 있다.
- 화면에서 a 링크를 클릭하면 뷰 라우터로 페이지 전환없이 컴포넌트 영역만 치환하여 포현하기 때문에 마치 URL을 이동한 것처럼 보인다. (Client Side Rendering)
- 하지만 URL을 직접 입력해서 접근할 경우에는 페이지를 서버에서 요청하고 응답을 받아 렌더링하게 된다. (Server Side Rendering)
- 그렇기 때문에 URL로 인한 404 페이지는 서버에서 요청받은 에러에 대한 매핑 정보(템플릿 정보)를 작성해주면 된다.
- 스프링의 경우에는 아래와 같이 web.xml에 DispatcherServlet에 404 발생시 NoHandlerFoundException을 발생시키고 이를 공통으로 예외 처리하는 클래스의 404 에러를 처리하는 메소드에 렌더링할 템플릿 이름을 추가해주면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>
|
cs |
1
2
3
4
5
6
7
8
9
10
|
@ControllerAdvice
public class CommonExceptionAdvice {
@ExceptionHandler(NoHandlerFoundException.class)
@ResponseStatus(HttpStatus.NOT_FOUND)
public String handle404(NoHandlerFoundException ex) {
return "index";
}
}
|
cs |
[vue-router] SPA 방식 애플리케이션 운영 시 주의사항
[vue-router] SPA 방식 애플리케이션 운영 시 주의사항 Vue를 Single Page Application 방식으로 애플리케이션을 작성하고 운영할 때 백엔드 서버 애플리케이션에 올려서 사용하니 한가지 문제를 만나게 되
jamong-icetea.tistory.com
[SPRING] 404 에러 페이지 처리
서블릿이나 JSP를 이용했던 개발 시에는 web.xml을 이용해서 별도의 에러 페이지를 지정할 수 있다.스...
blog.naver.com
'Frontend > Vue.js' 카테고리의 다른 글
뷰 필터 (0) | 2021.01.10 |
---|---|
Vue CLI 도구 설치할 때 문제점 해결 방법 (0) | 2021.01.10 |
NPM (Node Package Manager) (0) | 2020.01.15 |
웹팩 (webpack) (0) | 2020.01.14 |
서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 (0) | 2020.01.14 |