😊 뷰 라우터

1. 설치 및 파일 구조

npm install vue-router

src/router/index.js 파일에서 라우터 로직 관리

• Vue.use()

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

//VueRouter 플러그인 사용
Vue.use(VueRouter);

플러그인을 실행하고, 초기화하기 위해서 필요한 코드

• 뷰 라우터 인스턴스 생성과 routes 배열(속성) 정의

export default new VueRouter({
  routes: [{
      path: "/login",
      component: "LoginPage",
  }],
});

routes 배열은 라우팅 정보를 담는 속성
라우터 경로와 해당 경로에 접속할 경우 그려지는 페이지(컴포넌트)를 정의
export한 VueRouter 인스턴스를 main.js에 정의되어 있는 Vue 인스턴스 속성에 전달한다.

• router-view & router-link

router-view : 라우팅에 해당하는 컴포넌트를 보여주는 뷰 컴포넌트
router-link : 라우트 경로를 to에 해당하는 경로로 변경하는 뷰 컴포넌트

2. ✨✨ 코드 스플리팅

SPA 특성( 서버로부터 html 파일을 가져오는 것이 아니라, 윈도우 히스토리 API를 이용해서 경로에 매칭되는 화면을 렌더링한다. )으로 처음 페이지에 접근할때 필요한 모든 소스들을 서버로부터 가져오게 된다.
이때 코드 스프리팅을 하지않으면, 최초 애플리케이션 접속 시 app.js 파일안에 모든 페이지에 대한 정보를 담아서 가져오게 되고, 로딩 시간이 길어지게 된다.
따라서, 코드 스플리팅을 사용해 각 URL로 이동할때마다 해당하는 javascript파일을 로드해서 화면을 렌더링한다. 결과적으로, 최초 애플리케이션 접속 시 로딩 시간이 줄어들게 된다.

• 코드 스플리팅 적용 전 코드 : 모든 페이지들을 로드한다.

import LoginPage from '@/views/LoginPage.vue';
import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: LoginPage,
    },
    {
      path: '/signup',
      component: SignupPage,
    },
  ],
});

• ✨코드 스플리팅을 적용한 코드 : 화살표 함수를 이용해서, 필요한 자바스크립트 파일을 import한다.

// import LoginPage from '@/views/LoginPage.vue';
// import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

3. ✨ 뷰 라우터 리다이렉트 설정

: 애플리케이션의 루트 경로로 진입할 때 초기 진입 페이지를 리다이렉트를 통해서 구현할 수 있다.
: "/" 경로로 애플리케이션 진입 시, 항상 "/login" 경로로 리다이렉트된다.

{
  path: '/',
  redirect: '/login',
},

4. 없는 페이지에 접근할 경우 라우터 처리

: 정의된 라우터 경로를 제외한 다른 경로에 접근시 보여줄 페이지

{
  path: "*",
  component: "",
}

5. router 히스토리 모드

: 라우터 인스턴스의 속성에 mode: "history"를 적용한다.

=> 참고 링크 : https://router.vuejs.org/kr/guide/essentials/history-mode.html

6. ✨ 뷰 라우터 에러 핸들링

: 뷰 라우트(url)이 변경될때 여러가지 에러가 발생할 수 있는데, 이 에러를 체크할 수 있는 방법

- 참고 링크 : https://router.vuejs.org/guide/advanced/navigation-failures.html#navigationfailuretype

// 강제로 duplicated navigation에러 발생
return this.$router
  .replace({
    path: this.$route.path,
    query: this.$route.query,
    params: this.$route.params,
  })
  .catch((failure) => {
    // NOTE 라우트 에러 캐치!!
    console.log(failure.to.fullPath);
    console.log(failure.from.fullPath);
  });

: catch 문을 통해서 에러를 핸들링할 수 있다.
: 또한, 의도된건지 혹은 내가 소스를 잘못 작성했는지는 모르지만 새로고침 시에도 duplicated navigation 에러가 발생했다.