【Vue.js】컴포넌트의 3개의 네비게이션 가드

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다.
제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다.

구성요소의 세 가지 탐색 가드

내비게이션 가드란?

그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다.
구체적으로는, 로그인 전이면 로그인 화면에 리디렉트 시키는, 라고 하는 느낌.

Vue.js의 vue-router가 가지는 네비게이션 가드의 구조 3개

글로벌 비포 가드

루트 단위 가드

구성 요소 내 가드

의 3개가 있다.

글로벌 비포가드

모든 페이지 천이 전에 무언가의 처리를 실행하는 것으로, 가드를 실현할 수 있는 구조.
구체적으로는 router.beforeEach를 사용해, 이하와 같은 소스 코드를 쓴다.
아래와 같은 소스 코드에서는, 페이지 천이처의 URL이 /user/1일 때, /에 리다이렉트 한다고 하는 것.

main.js

import router from "./router";

router.beforeEach((to, from, next) => {
  if (to.path === "/users/1") {
    next("/");  
  }
  next();
})

소스 코드 전체는 이하.

루트 단위 가드

특정 페이지로의 천이시에 무언가의 처리를 실행하는 것으로, 가드를 실현할 수 있는 구조.
구체적으로는 beforeEnter를 사용해, 이하와 같은 소스 코드를 쓴다.
(이하에서는 특별히 아무런 가드도 하지 않는다)

route.js

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

import Home from "./views/Home.vue";
import HeaderHome from "./views/HeaderHome.vue";

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: "/",
            components: {
                default: Home,
                header: HeaderHome
            },
            beforeEnter(to, from, next) {
                next();
            }
        },
        // 省略
});

소스 코드 전체는 이하.

컴포넌트 내 가드

본제의 컴퍼넌트내 가드이지만, 이것은 Vue 인스턴스의 옵션으로서 정의한다.
정의할 수 있는 것으로는 3개가 있으며, 각각 다음과 같은 타이밍에서 실행된다.

beforeRouteEnter 자신의 인스턴스(User.vue의 인스턴스)가 작성되기 전에 실행되는 통상의 this를 사용할 수 없지만, next(vm => {}) 와 같이 하는 것으로 this에 상당하는 것을 사용할 수 있다

beforeRouteUpdateURL이 변경된 타이밍($route가 변경된 타이밍)에서 실행되는 Vue 인스턴스의 라이프사이클 후크가 없는 대신 인스턴스 변화(=URL의 변화)를 포착하기 위해서 이 beforeRouteUpdate를 사용한다(watch에서도 대체 가능 이다)※watch에 대해서는 여기

beforeRouteLeaveURL이 변경되고 자신의 인스턴스가 파괴되는 시점에서 실행되는 일반적으로 지금 페이지에서 멀리 갈 수 있습니까? 확인하고 OK이면 페이지 천이 등의 사용법을한다

동영상의 소스 코드는 이하.

User.vue

// 省略

<script>
export default {
  // 省略
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");

    // nextのCallBack関数はVueインスタンスが作成されてthisにアクセスできるようになったタイミング(＝非同期)で実行される
    next((vm) => {
      console.log(vm.id);
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");

    const isLeave = window.confirm("本当にこのページを離れますか？");
    if (isLeave) {
      next();
    } else {
      // falseにするとページ遷移がStopする
      next(false);
    }
  },
};
</script>

소스 코드 전체는 이하.

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.