[vue] router 네비게이션 가드 사용법 router.beforeEach

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from '@/components/home.vue';
import About from '@/components/about.vue';
import Flutter from '@/components/n_flutter.vue';

const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About },
     { path: '/flutter', component: Flutter },

]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});


outer.beforeEach((to) => {
  // only redirect to 'Home'
  // if we're not already on it
  if (to.name !== 'Home') {
    return '/'
  }
}); 

export default router

 

이 코드는 Vue Router의 beforeEach 네비게이션 가드를 사용하여 라우터가 변경되기 전에 실행되는 함수입니다. 

beforeEach 가드는 모든 라우터 변경 이벤트가 발생하기 전에 호출되며, 이 함수는 라우터 변경에 대한 조건을 확인하고 해당 조건이 충족되지 않을 때 홈 페이지로 리디렉션하는 역할을 합니다.

코드를 하나씩 살펴보겠습니다:

router.beforeEach 메서드를 호출하여 네비게이션 가드를 등록합니다. 

이 가드는 모든 라우터 변경 이벤트에 대해 실행됩니다.

to 파라미터는 이동하려는 라우트 객체를 나타냅니다. 

to.name은 이동하려는 라우트의 이름을 나타냅니다.

조건문 if (to.name !== 'Home')은 현재 이동하려는 라우트의 이름이 'Home'이 아닌 경우를 검사합니다. 

즉, 홈 페이지가 아닌 다른 페이지로 이동하려고 할 때 이 조건이 참이 됩니다.

조건이 참이 되면 return '/'를 사용하여 루트 페이지로 리디렉션합니다. 

이것은 홈 페이지로 되돌아가는 것을 의미합니다.

즉, 이 코드는 사용자가 홈 페이지가 아닌 다른 페이지로 이동하려고 할 때, 자동으로 홈 페이지로 리디렉션하도록 설정하는 코드입니다. 

이렇게 하면 특정 페이지로의 이동을 제한하거나 사용자를 기본 페이지로 다시 보낼 수 있습니다.