[vue.js] vue-router 튜토리얼 -1

개요

jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다.

 

그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요?

vue에서는 사용자가 요청한 경로에 매칭되는 컴포넌트를 import 해주는 vue-router라는 라이브러리를 사용해서 페이지를 동적으로 랜더링해주게 됩니다.

 

이번 글은 총 3개의 주제로 vue-router를 알아보고자 합니다.

1. vue-router 설치 및 기본 사용법

2. vue-router params와 query를 사용해서 이동할 컴포넌트에 데이터 넘겨주기

3. vue-router 중첩 라우터 구현 방법

 

그럼, 첫 번째 주제로 vue-router 설치 및 기본 사용법부터 알아보겠습니다.

 

👉 vue-router get started

 

사용 방법

1. 설치

npm i vue-router

 

2. 라우터 설정 파일 생성

프로젝트 홈 경로/src/router/index.js (파일 명은 상관없음.)

 

3. index.js에  다음 코드 작성

import Vue from 'vue';
import VueRouter from 'vue-router';  //👈 vue-router 라이브러리 import
Vue.use(VueRouter);  // 👈 vue 인스턴스에 vuerouter 라이브러리 추가


// 👇 라우터 작성
const routes = [
    {
    	path: '/dashboard',  // 👈 router 경로
        name: 'dashboard',   // 👈 router 이름, 라우터 요청할 때, name으로도 요청 가능.
        component: () => import('../views/Dashboard.vue'),  //👈 라우터 매칭 컴포넌트
    },
    {
        path: '/chart',
        redirect: '/chart/null/null',   // 👈 '/chart'경로이면 '/chart/null/null'경로로 요청됨.
        component: () => import('@/views/Chart.vue'),
    },
    {
        path: '/chart/:mode/:id', // 👈  param 값 입력 가능
        name: 'chart',
        component: () => import('@/views/Chart.vue'),
    },
]


// 👇 vue-router 인스턴스 생성
const router = new VueRouter({
    mode: 'history',
    routes
});

export default router;  // 👈 인스턴스 내보내기 -> main.js가 import 받을 것임.

 

4.

App.vue와 같은 경로에 있는 main.js에 라우터 객체를 vue 인스턴스에 추가하기.

import Vue from 'vue';
import App from './App.vue';
import router from './router';  //👈 라우터
//...

new Vue({
    // ...
    router,  // 👈 Vue 인스턴스에 라우터 객체 추가
    render: (h) => h(App),
}).$mount('#app');

 

5. vue 파일에 클릭이벤트 생성(index.vue)

<template>
    <div>
    	<div @click="$router.push("/dashboard")">Move Page!</div>
        // or
        <div @click="$router.push({ name: 'dashboard'}>Move Page!</div>
        // or
        <router-link :to="{ name: 'dashboard'}">User</router-link>
        // or
        <router-link :to="/dashboard">User</router-link>
    </div>
</template>

 

 

 

다음 글 보기

👉 2. vue-router params와 query를 사용해서 이동할 컴포넌트에 데이터 넘겨주기

👉 3. vue-router 중첩 라우터 구현 방법

서버 배포 시 주의사항 : pinokio0702.tistory.com/290?category=443984