Vue에서 데이터 호출 시점은 크게 2가지로 나뉜다.

1. 라우터 네비게이션 가드
   • 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)
2. 컴포넌트 라이프 사이클 훅
   • ( 컴포넌트가 생성)되자마자 호출되는 로직

2가지 중에서 라우터가 먼저 호출되고 라이프사이클 훅이 나중에 호출 된다.

이번 시간엔 라우터 네비게이션 가드에 대해 알아보자.

Navigation Guard

router가 이동될 때 특정 로직을 설정하는 것을 의미한다.

Guard는 2가지로 구분된다.

• 전역 가드

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

• 라우트별 가드

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

라우트별 가드를 이용하여 mixin.js의 로직을 옮겨보자.

// route/index.js

const loadData = (to, from, next) => {
  bus.$emit('start:spinner');
    store.dispatch('FETCH_LIST', to.name)
      .then(() => {
        next();
      })
      .catch(err => {
        console.log(err);
      });
}

export const router =  new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/news'
    },
    {
      path: '/news',
      name: 'news',
      component: NewsView,
      beforeEnter: loadData,
      // component: createListView('NewsView'),
      meta: {
        page: 1,
        type: 'lr'
      }
    },
    {
      path: '/ask',
      name: 'ask',
      component: AskView,
      beforeEnter: loadData,
      // component: createListView('AskView'),
      meta: {
        page: 2,
        type: 'lr'
      }
    },
    {
      path: '/item/:id',
      component: ItemView,
      meta: {
        page: 2.1,
        type: 'ud'
      }
    },
    {
      path: '/jobs',
      name: 'jobs',
      component: JobsView,
      beforeEnter: loadData,
      // component: createListView('JobsView'),
      meta: {
        page: 3,
        type: 'lr'
      }
    },
    {
      path: '/user/:id',
      component: UserView,
      meta: {
        page: 100,
        type: 'ud'
      }
    }
  ]
});

beforeEnter: 부분에 (to, from, next)인자를 받을 수 있다.

• to: 도착할 곳의 route 객체
• from: 출발한 곳의 route 객체
• next: 라우터 이동 트리거 콜백 함수

//to, from 객체 구조
{
  fullPath: "/news",
  hash: "",
  matched: [{…}],
  meta: {page: 1, type: "lr"},
  name: "news",
  params: {},
  path: "/news",
  query: {},
}

출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념