[ Vue.js ] 뷰 라우터 개념 , 설치 , 설정( index.js / main.js /

 

---

 

Vue Router ( 뷰 라우터 )

 

•  Vue.js 에서 페이지간 이동을 위한 라이브러리

•  Vue.js 의 공식 라우터

•  페이지 이동할 때, URL 변경되면 변경된 요소의 영역에 컴포넌트를 갱신한다.

•  뷰 라우터( Vue Router )는 뷰로 만든 페이지간에 자유롭게 이동할 수 있다.

태그	설명
< router - link to = "URL 값" >	페이지 이동 태그, 화면에서 <a> 태그로 치환된다.
< router - view >	페이지 표시 태그, 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역

 

※ 라우팅이란 ?

웹 페이지간의 이동 방법을 의미한다.

•  페이지를 이동할 때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아놓고 페이지 이동시

   클라이언트의 라우팅을 이용하여 화면을 갱신한다. 이러한 방식을 SPA라고도 한다. ( = Single page Application )

•  라우팅을 이용하면 화면 간의 전환을 매끄럽게 할 수 있다.

•  Vue, React, Angular 모두 라우팅을 이용하여 화면을 전환한다.

 

 

 

▶  뷰 라우터( Vue Router ) 설치

아래 명령어를 입력하여 뷰 라우터( Vue Router )를 설치한다.

현재 필자는 Vue.js 3을 이용하고 있기 때문에

npm i vue-router@next --save

 

 

▶  뷰 라우터( Vue Router ) 설치 확인

프로젝트의 package.json을 열었을 때 dependencies에 vue-router가 추가돼있는 것을 확인할 수 있다.

 

 

 

▶  Vue 프로젝트 디렉터리 구조

src
 ├── assets
 ├── components
 ├── router
 │   └── index.js
 ├── views
 ├── App.vue
 └── main.js

 

 

 

▶  뷰 라우터( Vue Router ) 설정( index.js 를 통해서 )

 

•  index.js는 웹 경로와 설정이 있는 Vue Router JavaScript 파일이다. ( 설정 필요 )

•  Vue 컴포넌트를 웹경로와 이름으로 연결하기 위해 route를 배열에 등록한다.

•  Main 화면의 설정을 바꿔서 띄어보도록 한다.

 

•  History Mode로 Router 생성

    -  Vue-router의 createRouter( ) 메서드와 createWebHistory( ) 메서드를 이용하여 router를 생성한다.

 

•  route( 라우트 ) 는 path, name, component로 구성된다.

   -  path : 라우트( route)를 찾을 수 있는 경로

   -  name : 라우트( route ) 로 연결할 때 사용하는 이름 /  < router - link > 에서 이름으로 연결할 때 사용된다.

   -  component : 라우트( route)에서 불러올 Vue 컴포넌트이다.  /  import나 import( ) 메서드로 Vue의 컴포넌트를 가져온다.

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/",
    name: "MainApp",
    component: () => import( '@/views/main/MainApp.vue'), // 동적 import
  }
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

 

 

 

▶  라우터( route) 모듈 가져오기 ( main.js를 통해서 )

 

•  애플리케이션의 진입점이다.

•  main.js는 Vue 인스턴스를 생성하는 역할이다.

•  main.js 에는 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많다.

•  애플리케이션의 설정 / 플러그인 / 라이브러리들을 파악할 수 있는 구조도가 된다.

 

import { createApp } from 'vue'

// 라우터 추가하기
import { router } from './router/index.js';

import App from './App.vue'

// Vue 인스턴스 생성
const app = createApp(App);

// 사용 설정하기
app.use(router);

app.mount('#app');

 

 

 

▶  Assets에 img 파일 옮기기 / views파일에 MainApp.vue 만들기

 

•  assets 디렉터리

-  CSS나 이미지 등의 정적 자산( Static Assets ) 을 저장한다.

-  SRC 디렉터리에 포함되어 있기 때문에 Webpack처리를 받는다.

 

•  views 디렉터리 안에 MainApp.vue 파일 만들기

-  아래와 같은 구조가 나오게 만들었다.

 

 

▶  Vue Router 연동

•  Vue Router를 연동하기 위한 웹 경로 , Vue 컴포넌트를 연결하여 createRouter( ) 메서드를 통해서 생성한다.

•  App.vue에서 use( ) 메서드를 통해서 사용하게 설정해야 한다.