[vue.js] Spring Boot & Vue.js 연동 (2) - vue router 설정 및 설정

 

Spring boot 와 Vue.js 를 연동 후에는  Router를 통한 다른 페이지로 이동시 문제점이 발생한다.

Hash Mode를 설정하는 경우에는 URL 호출 시 서버를 거치지 않지만 URL에 #이 표기 되는 문제점과 SEO에서 나쁜영향을 끼치게 되므로 HTML5 Mode(History Mode)로 설정을 진행하였다. 이 경우에는 URL 호출 시 서버를 한번 거치게 된다. Vue Router 설정 시 페이지 내에서 router로 생성된 링크는 잘 접속이 되지만 url로 접근하거나 새로고침을 하는 경우에는 Spring Boot에서는 'Whitelabel Error Page' 페이지로 전환과 함께 404 오류코드를 반환한다. 

 

사용자가 '/board' 또는 '/main' 등 페이지에 접근하려면 router 를 통해서 페이지를 연결할 수 있다.

vue 프로젝트 디렉토리 경로에서 터미널을 연다 ctrl + `

 

1. vue-router 설치

npm install vue-router@4

 

2. vue 샘플 라우터 추가

vue 에서 제공하는 샘플 라우터를 이용한다

vue add router

라우터 추가서 vue frontend 폴더에서 라우터 파일을 확인가능하다

 

3. 서버 기동 -  서버를 기동하여 home, about 링크를 확인한다

npm run serve

 

4. 라우터 설정 파일 확인

페이지 로드 방식과 라우팅 모드를 확인 할 수 있다. Homeview 는 최초로 페이지 접속시 이미 빌드된 결과물이 존재한다. 그러나 about 경우에 코드 스플릿팅이 되어있어 페이지로 이동시에 aboutView 가 빌드되어 보여진다.

모든 페이지를 처음에 빌드시에 많은 시간이 소모되므로 코드 스플릿팅을 통한 로딩이 필요한 페이지가 존재한다.

 

5. App.vue

App.vue 파일의 templete 내부를 보면 이전과 다르게 라우트 링크로 된 버튼이 있고 연결 가능하다.

 

6. main.js

생성한 라우터를 main  에 등록한다