65. UX를 고려한 데이터 호출 시점

데이터 호출 시점

1. 라우터 네비게이션 가드

  - 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)

  - beforeEnter : to, from, next 3개의 인자를 받음

import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'
// import createListView from '../views/CreateListView'

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history', // url #값 제거
    routes: [ //routes도 커졌을때 모듈화 가능
        {
            path: '/',// url에 대한 정보가 담기는곳, url주소
            redirect: '/news',// url 주소로 갔을때 표시될 컴포넌트
            
        },
        {
            path: '/news', 
            component: NewsView, 
            name: 'news',
            // 하이 오더 컴포넌트
            // 기존에 있던 컴포넌트 위에 컴포넌트가 하나 더 생김
            // component: createListView('NewsView'),
            
		// 특정 URL로 접근할때 인증정보가 있는지 없는지 확인할때 가장 흔하게 쓰임
            beforeEnter:(to, from, next) => { 
                console.log('to', to); // 이동할 URL의 라우터 정보
                console.log('from', from); // 현재 위치의 라우터 정보
                console.log(next); // next는 함수. 얘를 호출 해야지만 해당 페이지로 이동함
                
                if(to.matched === ''){ //이런 조건이 있으면 next로 가고 + 가장마니씀
                    next();
                }
                
                if(to.auth){ //to에 인증값이 있으면 next로 가고
                    next();
                }else{
                    router.replace('/login');
                }
            }

        },

---

2. 컴포넌트 라이프 사이클 훅

  - created(){} : 컴포넌트가 생성되자 마자 호출되는 로직 

 

---

 

UX를 어떻게 가져갈건지에 따라 

1. 라우터에서 beforeEnter 를 쓸건지

2. 컴포넌트 라이프 사이클 훅을 쓸건지

정책에 따라 결정하기