Vue.js Router로 싱글 페이지 어플리케이션(SPA) 페이지 라우팅 구현

Vue.js Router

Vue.js Router는 Vue.js 프레임워크에서 사용되는공식 라우터 라이브러리로, SPA에서 페이지 라우팅을 구현하는데 사용됩니다. Vue.js Router는 Vue 어플리케이션에서 다양한 View와 URL 간의 매핑을 정의하고, 사용자가 브라우저의 주소 표시줄을 통해 URL을 변경하거나 링크를 클릭할 때마다 적절한 뷰를 렌더링합니다.  

 

각 라우트에 대해 컴포넌트를 매핑하고, 중첩된 라우트와 동적 라우팅을 설정하여 사용할 수 있습니다. 또한 뒤로/앞으로 버튼을 클릭할 때마다 적절한 컴포넌트를 자동으로 로드하여, SPA에서 페이지 전환을 간편하게 관리할 수 있습니다.  

💁‍♂️싱글 페이지 어플리케이션(SPA)이란?
싱글 페이지 어플리케이션이란 우리가 기본적으로 알고있는 어플리케이션과 달리 하나의 페이지에서 필요한 모든 자원 로드하고, 사용자와의 상호작용을 통해 동적으로 내용을 갱신하는 어플리케이션입니다. SPA는 초기 페이지 로딩 이후에 다시 페이지를 다시 로드하지 않고, JS를 통해 동적으로 내용을 렌더링합니다. 이를 통해 웹페이지 간의 이동을 매끄럽게 할 수 있습니다.    

 

<router-view>:

`<router-view>`는 페이지 표시 태그로써 라우터에 의해 현재 URL에 해당하는 컴포넌트를 동적으로 렌더링하는 역할을 합니다. 즉, 현재 URL이 변경될 때마다 `<router-view>`는 해당 URL에 맞는 컴포넌트를 렌더링하여 사용자에게 보여줍니다.  

<!-- App.vue -->
<template>
  <div>
    <h1>Router</h1>
    <!-- 현재 URL에 해당하는 컴포넌트를 렌더링 -->
    <router-view></router-view>
  </div>
</template>

 

<router-link to="URL">:

`<router-link>`는 페이지 이동 태그로써 페이지 간의 링크를 생성하고 라우터의 상태를 변경하는데 사용됩니다. 기본 HTML에서 `<a>` 태그와 유사한 기능을 하지만, `<router-link>`는 페이지 전환 시 라우터의 상태만 업데이트하고 페이지를 새로 고치지 않습니다.

<!-- Main.vue -->
<template>
  <div>
    <h2>Main 페이지</h2>
    <!-- Login 페이지로 이동하는 링크 -->
    <router-link to="/Login">Login 페이지로 이동</router-link>
  </div>
</template>

---

라우터 설정 및 사용법

router.js:

프로젝트의 루트 디렉터리에 `router.js`파일을 생성하여 Vue Router 설정 및 라우트를 정의합니다.

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes = [
      {
        path: '/',
        name: 'Main',
        component: () => import('./views/Main.vue')
      },
      {
        path: '/login',
        name: 'Login',
        component: () => import('./views/Login.vue')
      },
      {
      	path: '/post',
        name: 'Post',
        component: () => import('./views/Post.vue')
        props: true
      }
    ];
});

export default router;

 

main.js:

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router, // 라우터 연결
  render: h => h(App)
}).$mount('#app');

 

💁‍♂️ `props: true`
Vue Router에서 라우트 컴포넌트에 데이터를 props 속성으로 전달하는 기능을 활성화하는 옵션입니다. 기본적으로 props: false이며 활성화하고 싶으면 명시해주어야 합니다.  

<!-- Post.vue -->
<template>
	...
</template>

<script>
export default {
	props: {
    	user: {
        	type: Object
        }
    }
}​

💁‍♂️ `mode`
`mode` 옵션은 라우터의 모드를 설정하는 옵션입니다. `hash`와 `history`가 있습니다.

`history`:
HTML 5 History API를 사용하여 라우팅 처리합니다. example.com/path와 같은 URL 형태로 표시됩니다. 해당 모드가 `hash`보다 더 깔끔한 URL을 제공하고 SEO 측면에서도 유리합니다. 하지만 서버 설정이 필요하고, 서버가 모든 라우트에 대해 동일한 페이지를 제공하도록 설정해야 합니다.

`hash`:
URL에 해시 기호(#)를 사용하여 라우팅을 처리합니다. example.com/#/path 와 같은 URL 형태로 표시됩니다. 해시 기호가 표시되어 있기 때문에 SEO 측면에서 불리하지만, 서버 설정이 필요하지 않다는 장점이 있습니다.   

 

💁‍♂️ $mount()

    var app = new Vue({
      el: '#app',
      router
    });

el 속성을 사용하여 인스턴스를 화면에 적용할 수 있지만, $mount()를 이용하여도 인스턴스를 화면에 적용할 수 있습니다.

Vue Router 공식 document에는 el 속성을 사용하는 방식이 아닌 생성된 인스턴스에 $mount()를 이용하는 방식을 사용하고 있어서 위 예시도 그에 맞게 작성하였습니다.

---

this.$router

Vue.js 어플리케이션에서 라우팅을 관리하는데 사용되는 라우터 객체입니다. SPA에서 페이지 간의이동을 처리하고, 브라우저히스토리를 관리하는 역할을 합니다. 주요 메서드는 다음과 같습니다.

 

 

`push(location: RawLocation, onComplete?: Function, onAbort?: Function)`:

• 새로운 URL로 페이지를 이동합니다. 
• location은 이동할 URL을 나타내는 문자열 또는 RawLocation 객체입니다.
• 이동이 완료되면 onComplete 콜백이 호출됩니다.
• 이동이 중단될 경우 onAbort 콜백이 호출됩니다.
• `this.$router.push('/path')`는 '/path' 경로로 이동합니다. 

 

`replace(location: RawLocation, onComplete?: Function, onAbort?: Function)`: 

• 현재 페이지를 새로운 URL로 대체합니다. 
• push와 동일한 매개변수를 사용하지만, 이동 후에 브라우저 히스토리에 새로운 URL이 추가되지 않습니다.

 

`go(n: number)`: 

• 이전 페이지로 또는 다음 페이지로 이동합니다.
•  n은 이동할 페이지 수를 나타냅니다. 예를 들어, go(-1)은 이전 페이지로 이동하고, go(1)은 다음 페이지로 이동합니다.

 

`back()`:

• 이전 페이지로 이동합니다. ` go(-1)`과 동일합니다.

 

`forward()`: 

• 다음 페이지로 이동합니다.  `go(1)`과 동일합니다.
  
  

`currentRoute`: 

• 현재 라우팅 정보를 나타내는 Route 객체를 반환합니다. 이 객체는 현재 페이지의 라우팅 정보를 포함하고 있습니다. 
• `this.$router.currentRoute`를 사용하여 현재 페이지의 라우팅 정보를 확인할 수 있습니다. 

---

라우팅 가드: 페이지 이동 전후에 로직 실행

페이지이동이 발생하기 전,후 또는 페이지 이동이 완료된 후에 특정 로직을 실행할 수 있도록 합니다.

 

`beforeEach`: 

• 라우트 전환 시작 전에 호출되는 가드입니다. 
• 페이지 이동이 시작되기 전에 특정 로직을 실행할 수 있습니다. 
• 주로 사용자 인증을 확인하거나 특정 조건에 따라 페이지 이동을 차단할 때 사용됩니다. 
• 이 가드에서 `next()` 함수를 호출하면 페이지 이동이 허용되고 정상적으로 이동합니다.
• 이 가드에서 `next(false)`를 호출하면 페이지 이동이 차단됩니다.

 

`beforeResolve`: 

• 비동기 컴포넌트 또는 라우트가 해결(resolve)되기 전에 호출되는 가드입니다.
• 이 가드는 페이지 이동 전에 호출되며, 이후의 처리가 완료될 때까지 대기합니다.
• 보통 사용자 데이터를 미리 로드해야 할 때 유용합니다.
• 이 가드에서 `next()` 함수를 호출하면 페이지 이동을 허용하고, 컴포넌트가 비동기로 로드될 때 해당 컴포넌트가 해결되도록 합니다. 

 

`afterEach`: 

• 라우트 전환이 완료된 후에 호출되는 가드입니다. 
• 페이지 이동이 완료된 후에 특정 작업을 처리할 수 있습니다. 
• 예를 들어, 페이지 전환 후 스크롤 위치를 조정하거나 로딩 스피너를 종료하는 등의 작업에 사용됩니다.
• 이 가드에서 `next()` 함수를 호출하면 페이지 이동을 완료하고, 페이지가 렌더링된 이후에 추가적인 작업을 수행할 수 있습니다.  

 

라우팅 가드를 사용하기 위해서는 위 메서드에 함수를 등록해주면 됩니다.

각 가드 메서드는 인자로 to, from, next를 받습니다.

• `to`: 이동할 라우트 객체
• `from`: 현재 라우트 객체
• `next()`: 가드의 처리를 계속 진행하도록 호출하는 역할  

 

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes = [
      {
        path: '/',
        name: 'Main',
        component: () => import('./views/Main.vue')
      },
      {
        path: '/login',
        name: 'Login',
        component: () => import('./views/Login.vue')
      },
      {
      	path: '/post',
        name: 'Post',
        component: () => import('./views/Post.vue')
        props: true
      }
    ];
});

// beforeEach 가드 설정
router.beforeEach((to, from, next) => {
  // 로그인 여부 확인
  const isLoggedIn = checkUserLoggedIn();

  if (to.name === 'Post' && !isLoggedIn) {
    // 로그인이 필요한 페이지인데 로그인되어 있지 않으면 로그인 페이지로 이동
    next({ name: 'Login' });
  } else {
    // 로그인이 필요하지 않은 페이지 또는 로그인 상태인 경우 정상적으로 페이지 이동
    next();
  }
});

export default router;

---

여러 개 컴포넌트 동시에 표시하기

위 예제는 한 개의 Component만 적용하였고, 여러 개의 Component를 동시에 적용하기 위해선 Nested Router와 Named View를 알아야 합니다.

 

1. Nested Router (중첩 라우터)

• Router를 이용하여 웹 페이지 간 이동시 최소 2개 이상의 컴포넌트를 나타낼 수 있습니다.
• 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조입니다.
• 화면을 구성하는 컴포넌트 개수가 적을 때는 사용하기 괜찮지만 중첩 구조이기 때문에 많은 컴포넌트를 적용하는 데는 어려움이 있습니다. 

    var User = {

      template: `

            <div>

                User Component

                <router-view></router-view>  

            </div>

        `

    };

    var UserProfile = { template: '<p>User Profile Component</p>' };

    var UserHistory = { template: '<p>User History Component</p>' };

    /* Nested Router 정의 */

    var routes = [

      {

        path: '/user',

        component: User,

        children: [

          {

            path: 'history',

            component: UserHistory

          },

          {

            path: 'profile',

            component: UserProfile

          },

        ]

      }

    ];

    var router = new VueRouter({

      routes

    });

    var app = new Vue({

      router

    }).$mount('#app');

 

 

 

2. Named View

• 화면을 이동했을 때 여러 컴포넌트를 동시에 나타내는 Routing 방식
• 여러 개의 컴포넌트를 그냥 나타내는 방식

  <div id="app">

    <!-- name속성: components 속성에 정의한 컴포넌트와 매칭 -->

    <!-- name속성 지정하지 않은 경우: default -->

    <router-view name="header"></router-view>

    <router-view></router-view>

    <router-view name="footer"></router-view>

  </div>

 

 

    var Header = { template: '<div>This is Header</div>' };

    var Body = { template: '<div>This is Body</div>' };

    var Footer = { template: '<div>This is Footer</div>' };

    var router = new VueRouter({

      routes: [

        {

          path: '/',

          components: {

            default: Body,

            header: Header,

            footer: Footer

          }

        }

      ]

    });

    var app = new Vue({

      router

    }).$mount('#app');