[Vue.js] 02. Vue 라우터

오늘 아침에  딸래미랑 싸우고 딸래미가 안아주지 않고 등원해서 속상함.

 

자 이제 라우터를 사용해보장~~

- 라우팅이란?

 나는 서버용 장비가 생각났어. 삼국지에 나오는 장비 말고, 분전함 같은 그 데이터 네비게이션 같은 역할하는 장비.

여기서는 그냥 웹브라우저에 어떤 주소 입력했는데, 해당 주소에 맞는 페이지를 보여주는거라고 보면 될듯.

미리 지정된 url에 맞는 페이지를 보여주는~~ 스프링에서 url 매핑 생각하면 될듯~~

 

앞선 글에서 나는 플러그인으로 라우터를 이미 설치했지.

 

근데 별도로 설치 할 수도 있쒀.

$ vue add router

위 처럼 cli로 할 수도 있고,

그 vue ui를 실행해서 프로젝트 매니저로 간담에 플러그인에서 추가 할 수도 있지.

설치된 플러그인 확인도 하고, 추가 설치도 가능해.

 

디폴트로 했을때랑 뭐가 다를거 같아?

위에 Home, About 보여?

폴더 구조를 보면 views에 Home.vue랑 About.vue가 있는데,

원래 default로 생성하면 Home.vue의 내용은 App.vue에 있어.

App.vue는 두 화면으로 분기가 가능하게끔 해주지

 

그리고 /src/router/index.js를 살펴보면

routes라는 배열에 두개의 정보가 있어.

각각 Home 과 About에 대한 정보인데,

component 부분을 보면 내용이 살짝 다르네?

아래에 있는 컴포넌트 위에는 주석으로 뭐라고 막 써있엉...

chunk file 에 대해 찾아보면 알테지만, 대략적으로 묶음 단위라고 생각하면 될것 같아.

빌드 이후의 파일 생성할때 하나의 파일로 묶여있으면 엄청난 양의 파일을 로딩해야겠지?

근데 나눠져 있으면 필요한 파일만 로딩하면 되는거고,

그래서 lazy load 기능도 있는건가봐, jpa에서 레이지 로딩 써봤지?

 

글구 여기서 중요한건 위 처럼 하는건 실상 prefetch(리소스를 캐시에 저장) 라는 기능을 쓰는건데,

이건 구글링하면 내용 나올 거고,

 

중요한건 해당 기능을 끄는 방법이지,

 

프로젝트 root에

(root가 어딘지 모르는 사람들도 있으니...프로젝트내 폴더 최상위 말하는거양~~

나도 예전엔 몰랐음. c:\ 에서 삽질했었지)

vue.config.js 라는 파일을 생성하고 prefetch를 안쓴다고 작성해야함.

module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
  }
}

 

근데 막상 꼭 혹은 자주 이용할것 같은 애들은 그래도 캐시에 올라가 있으면 좋지 않겠어?

    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    component: () => import(
      /* webpackChunkName: "about" */
      /* webpackPrefetch: true */
      '../views/About.vue')

위 코드를 아래 처럼 바꾸면 되징.

 

그리고 /**/ 이건 꼭 오라클에서 HINT 쓰는거랑 비슷해 보이는데 ㅋㅋ

이건 매직코멘트래 

링크 남길게 이건 

https://webpack.js.org/api/module-methods/#magic-comments

Module Methods | webpack