Vue vue-router Navigation Guards을 이용한 데이터 호출 시점

📗 Navigation Guards 공식문서

Vue의 라이프 사이클과 같이 beforeEnter()를 사용하게 되면, 라이프 사이클이 붙기 전, 라우팅을 할때의 시점에서 무언가(?)를 할 수 있게 된다.

따라서 HOC와 Mixin의 연장선으로 이번엔 라우터 가이드를 활용해 created()로직을 사용해보려고 한다.

HOC와 Mixin의 히스토리를 알고 싶다면...
1️⃣HOC created 로직 재활용
2️⃣Minxin created 로직 재활용

this로 붙던 store와 route는 Vue 인스턴스 내부에서 사용이 가능하기 때문에 store는 import 해주고 this.$route.name은 beforeEnter()함수의 인자인 to.name에 동일한 정보를 얻을 수 있기 때문에 대체하였다.

또한 라우팅을 하기 위해서는 next()함수를 사용해야만 페이지를 넘어 갈 수 있으니, 페이지가 넘어가는 시점 같은 부분도 정해 줄 수 있게된다.

따라서 Vuex에서 list:[] state 하나로 모든 페이지에 사용하고 있었는데, 페이지가 바뀌고 페이지에 맞는 데이터가 fetching 되어 화면이 바뀔 때, 이전 페이지에서 사용되는 데이터가 보이던 UX적인 문제가 있었는데, 데이터 호출 시점과 페이지 라우팅 시점을 정할 수 있음으로 이러한 문제도 해결되었다.

지금 아침 7시인데 밤새면서 공부하면서 쓰는거라 두서없음 주의...

// Vue 애플리케이션이 Vue Router를 전역으로 사용할 수 있도록 설치
Vue.use(VueRouter);

// router 세팅(?)
export const router = new VueRouter({
    mode: "history", // 표시되는 url => root/#/ 형식을 없애줌
    routes: [
        {
            path: "/",
            redirect: "/news",
        },
        {
            path: "/news", // 주소
            name: "news",
            // component: createListView("NewsView"), // HOC
            component: NewsView,
            beforeEnter: (to, from, next) => {
                bus.$emit("start:spinner");
                store
                    .dispatch("FETCH_LIST", to.name)
                    .then(() => {
                        console.log("fetched", to.name);
                        bus.$emit("end:spinner");
                        next(); // page를 이동시키는 함수 (이것이 없으면 절대로 이동이 안됨)
                    })
                    .catch((err) => {
                        console.error(err);
                    });
            },
        },
    ],
});