1만시간의법칙

router 란

클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다.
URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다.
따라서 유연하게 페이지 젼환이 가능하다. vue 프레임워크에서는 vue-router라는 라우팅 라이브러리를 지원한다.

name 중복 불가

component : 어떤 component로 연결할 지에대한 값

router에 component 연결하는 방법은 두 가지가 있음 

인스턴스 방식으로 생성

app.js로 무조건 들어오는 경우, main page , 사이즈가 큰 경우

import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)

const routes = [  {    path: '/',    name: 'home',    component: HomeView  }

매서드를 이용해 생성 

미리 받아오면 좋은 페이지 or 사이즈가 작은 경우

{   path: '/about',   
name: 'about',    
component: () => import (/* webpackChunkName: "about" */ '../views/AboutView.vue')  }

 webpackChunkName: "about"  -> 설정해준 값으로 js 파일이 만들어짐

** prettier 확장 설치 시 아래 옵션 추가하기 (eslint와 다른 설정 수정)

package.json 과 동일 선상에

.prettierrc 파일 생성 

{    "semi" : false,   
"bracketSpacing": true,   
"singleQuote": true,   
"useTabs": false,   
"trailingComma": "none",   
"printWidth": 80}

package.json 에 rules 추가

"rules": {"space-before-function-paren":"off"} //들여쓰기 디폴트 해제

prepatch 기능

webpackPrefetch:true 로 설정

미래에 필요하게 될 데이터의 요청/응답 시간을 단축 시키기 위해 서버로 부터 cache로 미리 데이터를 받아 놓는 기능

client로 내리는 건 아니지만 cache에 저장

 {    path: '/about',   
name: 'about',   
component: () => import(/* webpackChunkName: "about", webpackPrefetch:true */ '../views/AboutView.vue')  }

npm create project 시 project 폴더 생성

main.js : npm run serve 시 실행되는 파일

인스턴스를 생성하고 index.html 파일과 연결해준다.  router, store를 사용하기 위한 Vue 함수를 넣어줌

App.vue : 화면구성

App.vue 파일은 하나의 컴포넌트이고, 여기에 여러 컴포넌트들을 불러와서 main.js로 넘겨주는 통합 컴포넌트

router-link to 라는 tag 사용  클릭 시 broswer url이 바뀜

>>url 변화는 router-view가 교체되는 것 =  index.js component로 연결되는 것 

router

화면이 이동되는 것 처럼 보일 수 있게 설정해주는 것

router/index.js > router-link to에서 연결한 path 라는 key가 존재

>> App.vue에서 Home을 클릭 -> router에서 설정한 path, name = home 에 맞는 component 값 = views/Homeview.vue  을 찾아서 보여줌

package.json : 프로젝트 정보, 실행 명령어, 운영을 위한 설치 정보