vue 에서 페이지 접근 전 경고 창 또는 에러페이지 띄우는 법

vue를 이용하여 코딩을 하다보면 잘못된 경로로 접근하거나 

권한이 없는데도 접근하려는 것을 막고 싶을 떄가 있다.

이럴때는 간단히 네비게이션 가드를 이용한다.

router 가 지정되어있는 index.js 파일로 간뒤 아래와 같이 코드를 입력하면 된다.

아래와 같이 alert 부분에 방지하고 싶은 조건등을 적어준 뒤 이벤트를 발생 시키면 된다.

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

router.beforeEach((to, from, next) => {
  // 조건
  alert('here')
})

 

또는 원하는 에러 페이지로 이동 시키고 싶을 때에는 아래와 같이 next 에 해당 페이지 라우터 이름을 명시해주면 된다.

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

router.beforeEach((to, from, next) => {
  // 조건
  next(name: 'page404')
})