학습목표 : 
라우터 인스턴스에서 `history`옵션을 사용할 수 있다. 다양한 history mode를 배워보자
- Hash    : createdWeb**Hash**History()
- History : createdWebHistory()
- Memory  : createdWeb**Memory**History()

🔷 Hash mode

image.png

임포트 됐는지 꼭 확인하기

임포트 됐는지 꼭 확인하기

<aside> 🧑‍💻

index.js에서 router인스턴스를 생성할 때, 히스토리 옵션( History모드 )을 사용하고 있습니다.
Hash Mode를 사용하기 위해createdWebHashHistory() 를 사용합니다.

</aside>

image.png

image.png

<aside> 🧑‍💻

URL뒤에 #( hash )이 붙었다. 문자열을 넘기면 URL 루트로 기본 경로에 붙음

</aside>

🔸 배포 파일 만들기

  1. 서버 종료 - q

  2. npm run build 명령어 입력

    image.png

🤔 : 우리는 View가 여러개인데 왜 html 하나? 다른 것도 많이 없어보이는데?

🧐 : Vue처럼 React, Angular같은 프레임 워크는 SPA기반이기 때문 CSR

<aside> 👨‍🏫

서버에 접속(요청)하면 index.html파일을 받고, UI는 JavaScript코드로 만들어 body의 #app에 넣는다.

</aside>

Hash Mode 🆚 History Mode