진스
beforeEnter 사용법 2가지 본문
방법 1.
|
1-1 . 함수를 변수로 넣어놓고 const spinner = (to, from, next) => { bus.$emit("start:spinner"); store .dispatch("FETCH_LIST", to.name) .then(() => { bus.$emit("end:spinner"); next(); }) .catch((err) => { console.log(err); }); };
1-2. 해당 컴포넌트 위치에 변수넣어주기 const routes = [ { path: "/news", name: "news", component: () => import("@/views/NewsView"), beforeEnter: spinner, }, ] |
방법 2.
|
2. 해당 컴포넌트에 바로 넣어주기 const routes = [ { path: "/news", name: "news", component: () => import("@/views/NewsView"), beforeEnter: (to, from, next) => { console.log(to, from, next); bus.$emit("start:spinner"); store .dispatch("FETCH_LIST", to.name) .then(() => { bus.$emit("end:spinner"); next(); }) .catch((err) => { console.log(err); }); }, }, ] |
'Vue' 카테고리의 다른 글
| input 박스 하위 컴포넌트로 데이터 연결 방법 (0) | 2021.04.25 |
|---|---|
| vue 플러그인 제작 및 사용 2가지방법 (0) | 2021.04.25 |
| 간단한 event Bus 등록 및 사용예 (0) | 2021.04.24 |
| 믹스인과 하이 오더 컴포넌트 비교 분석 (0) | 2021.04.24 |
| Vue Router Transitions(라우터 트랜지션) (0) | 2021.04.23 |
