Vue Router

Vue Router

vue 에서 페이지 간 이동시 url 이 변경되면 컴포넌트를 갱신하는 라이브러리 입니다.

설치

npm install vue-router --save

[참고: Vue2의 경우, router@3, Vue3의 경우, router@4 버전을 설치해주어야 합니다.]

구성

src 밑에 router 폴더를 생성하고 index.js 를 하나 만들어줍니다.

import Vue from 'vue';
import VueRouter from 'vue-router';
import NewsView from '@/views/NewsView.vue';

Vue.use(VueRouter);

export const router = new VueRouter({
  // 해쉬 값 제거 방식.
  mode: 'history',
  routes: [
        {
      /**
       * @param path: url
       * @param components: url 주소로 갔을 때 표시될 컴포넌트
       */
    {
      path: '/',
      redirect: '/news'
    },
    {
      path: '/news',
      component: NewsView
    }
  ]
});

다음과 같이 index.js 를 만든 뒤, main.js 에 등록해주면 됨.

main.js

import Vue from 'vue';
import App from './App.vue';
import { router } from '@/router';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

동적 라우팅 매칭

const router = new VueRouter({
    routes: [
        // 아래와 같이 :id 로 넘겨주면 params 에 id 값이 넘어감.
        { path: '/user/:id', component: User }
    ]
});

: id 로 해서 {{ item.user }} 와 같이 사용하면, routes 아래에 params 에 id 값이 들어오는 것을 확인할 수 있음. (this.$routes.params.id)

Nested 라우팅

• 라우터 컴포넌트 안에 하위 라우터 컴포넌트를 중첩하여 구성하는 방식
• 라우터로 화면을 이동할 때 하위 컴포넌트를 표시할 수 있음.
• 라우터 설정에서 children 옵션 사용

const router = new VueRouter({
  routes: [
      {
        redirect: '/home/dashboard',
        path: '/home',
        name: 'home',
        component: Home,
        children: [
          {
            // /home/dashboard
            path: 'dashboard',
            name: 'dashboard',
            component: DashBoard,
          }
        ]
      }
    ]
});

라우터 트랜지션

특정 링크로 이동시 뷰 내부에서 제공하는 트랜지션 API 를 이용해서 부드러운 화면 전환을 제공함.

<transition name="page">
  <router-view></router-view>
</transition>

<style>
/* Router Transition */
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}
</style>

뷰 라우터 네비게이션 가드

뷰 라우터로 특정 URL 에 접근할 때 해당 URL 의 접근을 막는 방법을 말합니다.
예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다.
하지만, 중간에 기다려야 할 수 있음으로 사용자 UX 가 필수입니다. (로딩바, 스피너)

네비게이션 가드의 종류

• 애플리케이션 전역에서 동작하는 전역 가드
• 특정 URL 에서만 동작하는 라우터 가드
• 라우터 컴포넌트 안에 정의하는 컴포넌트 가드

1. 전역가드

라우터 인스턴스를 참조하는 객체로 설정합니다.

router.beforeEach((to, from, next) => {
    // to: 이동할 url
    // from: 현재 url
    // next: to 에서 지정한 url 로 이동하기 위해 꼭 호출해야 하는 함수

    if (to.matched.some(function(routeInfo) {
    return routeInfo.meta.authRequired;
  })) {
    // 이동할 페이지에 인증 정보가 필요하면 경고 창을 띄우고 페이지 전환은 하지 않음
    alert('Login Please!');
  } else {
    console.log("routing success : '" + to.path + "'");
    next(); // 페이지 전환
  };
});

2. 라우터 가드

전체 라우팅이 아니라, 특정 라우팅에 대해서 가드를 설정.

var router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: function(to, from, next) {
        // 인증 값 검증 로직 추가
      }
    }
  ]
})