[Vue.js] Today I Learned - 라우터 & 컴포넌트 설계

뷰 라우터 설치 및 연결

뷰 라우터 설치

npm i vue-router

뷰 라우터 연결

1. src/routes/index.js에 VueRouter 생성

import Vue from 'vue';
import VueRouter from 'vue-router';
 
// VueRouter 사용
Vue.use(VueRouter);
 
// VueRouter 인스턴스 생성 및 export
export default new VueRouter();

2. src/main.js에 VueRouter 모듈 등록

import Vue from 'vue';
import App from './App.vue';
// VueRouter import
import router from '@/routes/index';
 
Vue.config.productionTip = false;
 
new Vue({
  render: h => h(App),
  // VueRouter 연결
  router,
}).$mount('#app');

페이지 컴포넌트 생성 및 연결

컴포넌트 생성

1. src/views에 LoginPage.vue, SignupPage.vue 생성

<!-- LoginPage -->
<template>
  <div>login</div>
</template>
 
<script>
export default {};
</script>
 
<style></style>
 
<!-- SignupPage -->
<template>
  <div>
    signup
  </div>
</template>
 
<script>
export default {};
</script>
 
<style></style>

컴포넌트 연결

1. src/routes/index.js에 페이지 컴포넌트 등록

import Vue from 'vue';
import VueRouter from 'vue-router';
// 컴포넌트 import
import LoginPage from '@/views/LoginPage.vue';
import SignupPage from '@/views/SignupPage.vue';
 
Vue.use(VueRouter);
 
export default new VueRouter({
  // routes속성 이용하여 경로와 컴포넌트 등록
  routes: [
    {
      path: '/login',
      component: LoginPage,
    },
    {
      path: '/signup',
      component: SignupPage,
    },
  ],
});

라우팅 동작 확인

1. src/App.vue에 <router-link>, <router-view> 사용

<template>
  <div>
    <header>
      <!-- to: 이동할 페이지 경로 지정 -->
      <router-link to="/login">로그인</router-link> |
      <router-link to="/signup">회원가입</router-link>
    </header>
    <!-- router-view: router-link를 통해 이동한 페이지를 보여주는 영역 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {};
</script>
 
<style></style>

2. 동작 확인

코드 스플리팅 소개 및 적용

코드 스플리팅 소개

코드 스플리팅은 싱글 페이지 애플리케이션의 성능을 향상시키는 방법이다. 싱글 페이지 애플리케이션은 초기 실행 시 필요한 웹 자원을 모두 다운 받는 특징이 있는데 코드 스플리팅을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운받아 성능을 향상시킬 수 있다.

코드 스플리팅 적용

1. src/routes/index.js에 코드 스플리팅 적용

import Vue from 'vue';
import VueRouter from 'vue-router';
 
// import LoginPage from '@/views/LoginPage.vue';
// import SignupPage from '@/views/SignupPage.vue';
 
Vue.use(VueRouter);
 
export default new VueRouter({
  routes: [
    {
      path: '/login',
      // dynamic import를 이용하여 해당 경로로 접근시 웹 자원을 다운 및 사용
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

초기 진입 페이지 설정

리다이렉트 소개

특정 URL로 접근 시 지정된 URL로 이동하게 하는 것

리다이렉트 설정

1. src/routes/index.js에 리다이렉트 설정

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
export default new VueRouter({
  routes: [
    {
      // '/' 요청시 '/login'으로 전환
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

없는 페이지 접근 시 라우터 처리

없는 페이지 접근 시 처리 방법

뷰 라우터에 등록되지 않은 path를 통해 접근할 때 오류를 알려주는 컴포넌트를 표시하도록 등록된 경로 이외에 모든 경로를 지칭하는 *를 사용하여 오류 컴포넌트를 등록한다.

 

방법

1. src/routes/index.js에 오류 컴포넌트 등록

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
      // 위에 등록된 path이외의 모든 path
      path: '*',
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});

2. src/views/NotFoundPage.vue 생성

<template>
  <div>
    Page is not found
  </div>
</template>
 
<script>
export default {};
</script>
 
<style></style>

3. 동작 확인

Mode: History 설정

History 모드 사용 시

URL 중간에 있는 #(해시)을 제거해준다.

History 모드 사용 시 단점 (참고)

URL에 #(해시)가 존재하지 않기 때문에 서버가 해당 정보가 있는지 없는지 알지 못한다. 그렇기 때문에 배포시에 각 서버에 맞게 포괄적인 대체 경로를 추가 설정을 해야 한다. (참고)

History 모드 설정

1. src/routes/index.js에 history 모드 설정

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
export default new VueRouter({
  // history 모드 설정
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
      path: '*',
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});

2. 동작 확인