[router] 페이지 링크

 

이전게시글에서 vue와 spring boot를 연동해보았고, 해당 부분까지 작업이 완료 된 상태에서 화면 전환을 자유로이 하기 위해 routing작업을 진행해보았다.

 

01. Router란?

02. 설치방법
   01) CDN
   02) NPM

03. 적용방법
   01) router객체 생성
   02) router 적용
   03) router-view
   04) router-link

 

---

 

01. Router란?

routing은 네트워크에서 경로를 선택하는 프로세스라고 정의하고, router는 네트워크간에 데이터 패킷을 전송하는 장치라고 정의한다.

 

우리가 궁금한 Vue에서의 router는 페이지 이동을 위한 라이브러리이며,

페이지 이동을 위한 url 변경 시에는 미리 읽어들여놓았던 화면문서를 요청에 맞는 화면으로 출력하기 때문에, 초기 로딩이 상대적으로 느린 대신, 페이지간 전환이 빠른것이 특징인 SPA에서 이용되는 개념이다.

 

아래 링크를 통해 SPA와 ROUTING에 대해 조금 더 자세히 살펴볼 수 있겠다.

https://poiemaweb.com/js-spa

SPA & Routing | PoiemaWeb

 

 

---

 

02. 설치방법

본인의 경우 NPM 방식을 통해서 작업을 진행했기때문에 CDN방식은 타 블로그 링크를 참조하여 적용 방법과 예시를 확인할 수 있도록 하였다.

 

01) CDN

설치가 귀찮다면 아래의 코드 한 줄 추가를 통해 인터넷에 존재하는 router.js를 참조할 수 있다. 일반적으로 vue 인스턴스를 사용하는 경우에 사용되는 것 같다.

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

적용 방법은 아래 링크를 참고할 수 있겠다.

https://99geo.tistory.com/39

Vue Router !

 

---

 

02) NPM

터미널에 설치 명령어를 입력하는 방식으로 진행된다. 명령어는 아래와 같다.

>> npm install --save vue-router

 

 

---

 

03. 적용방법

 

01) router객체 생성

설치가 완료되었다면 router 객체를 생성해주어야하는데, 본인의 경우 아래와 같이 별도로 javascript파일을 추가하여 작업을 진행하였다. 

프로젝트 구조

 

 

router.js파일의 소스코드를 아래에 첨부하였다.

// 설치한 vue-router를 import
import { createWebHistory, createRouter } from "vue-router";

//path별로 사용될 최상위 컴포넌트를 추가
import MainPage from "@/views/MainPage"; 
import Home from "@/views/Home";
import ErrorPage from "@/views/ErrorPage";

// router 객체 생성
const router = createRouter({
    history : createWebHistory(),
    routes : [ // path별로 component를 알맞게 추가해주기
        { path : "/", name : "main", component : MainPage }, //앱 구동시 표출할 페이지
        { path : "/home", name : "home", component : Home }, //추가로 만들어봄
        { path : "/error", name : "not-found", component : ErrorPage }, //추가로 만들어봄22
    ]
});

// 다른 javascript파일에서 해당 객체 참조 가능하도록 export 진행
export default router;

 

 

---

 

02) router 적용

vue 프로젝트 생성시 자동으로 추가 되었던 main.js파일을 열어 아래와 같이 수정해준다.

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router"; // 위에서 export한 router를 참조

createApp(App).use(router).mount('#app'); // 앱 구동시 App.vue로 이동하도록 설정

 

---

 

03) router-view

<template>

    <!-- name속성을 정의해주지 않아 default 값(name="main")으로 렌더링 됨 -->
    <router-view />
    
<!--
    이렇게 해주면 router.js에서 name을 not-found로 설정한 routing을 적용하겠지?
    <router-view name="not-found" />
-->

</template>

<script>
    export default {
        name: 'App'
    }
</script>

<style>

</style>

 

 

적용이 완료된 정상 실행 화면이다.

 

 

url 수정해주면 위에서 설정한대로 잘 나와용

 

 

---

 

04) router-link

url 값을 직접 변경하거나, a태그의 src를 설정해주어 화면간 전환을 할 수 도 있겠지만, vue-router에서 제공하는 태그도 있다!

 

아래와 같이 사용할 수 있는데, 

<router-link to="이동할 path">표시될 글씨</router-link>

 

 

본인의 경우는 MainPage.vue에 아래와 같은 내용을 추가해보았다.

 

 

 

오른쪽 구석에 보이시나용

 

 

참고로 F12눌러서 개발자모드 진입해보면, 아래와 같이 a태그로 조회된다

 

 

 

 

추가한 링크를 클릭해주면 아래처럼 잘 이동한다 ~~~

 

 

---

 

 

초스피스 간단하게 router 적용 끝