Vue Router

• <router-link to> </router-link> 어디 페이지 이동할지

• <router-view> </router-view> 어디서 보일지

• npm i vue-router@next 설치

Vue Router 모드

Hash

• 도메인/#/~ 형식
• 서버에 요청을 할 필요없다.
• 하나의 도메인만을 사용하기 때문에
• routes폴더 idnex.js파일에 import { createRouter, createWebHashHistory } from 'vue-router'

HTML5

• 도메인/~ 형식
• History모드라고도 불림
• 주소에 맞는 서버에 연결
• routes폴더 idnex.js파일에 import { createRouter, createWebHistory } from 'vue-router'
• webpack.config.js파일에 해당 내용 추가

  output: {
    publicPath: '/',
  }

• dist 파일의 index.html의 경로가 절대경로로 바뀜
• 로컬에서 개발할 서버인 devServer에 해당 내용도 추가

  devServer: {
    historyApiFallback: true
  }

Babel

• 최신의 JS문법을 구형의 브라우저에서도 동작할 수 있는 JS문법으로 변환

• ES6(const, let) => ES5(var)

• npm i -D @babel/core @babel/cli 설치

• "sciprts": { "babel": "babel main.js --out-dir dist" } 진입점 설정

최신의 JS문법을 구형의 브라우저에서도 동작할 수 있는 JS문법으로 변환(전역오염 단점)

• npm i -D @babel/preset-env 설치
• babel.config.json 폴더 생성 후 { "presets": ["@babel/preset-env"] }등록
  전역을 오염시키지 않고도 변환된 결과가 동작할 수 있도록
• npm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3