2023/06/13__VueJS(router)

06.내비게이션과 라우터

라우터란?

• 페이지 간 이동을 위한 라이브러리
• 경로와 컴포넌트를 등록하면 싱글페이지 앱에서 사용자가 클릭한 경로로 화면이 이동하도록 도와줌

주요기능

• 중첩된 route/view mapping
• 모듈화된, 컴포넌트 기반의 라우터 설정
• 라우터 파라미터, 쿼리, 와일드 카드
• vue.js의 transition system을 이요한 트랜지션 효과
• 세밀한(Fine-grained) 네비게이션 컨트롤
• active CSS 클래스를 자동으로 추가해주는 링크
• HTML5 History모드 또는 Hash 모드
• -- auto-fallback in IE9
• -- vue router에서 default는 Hash 모드
• 사용자 정의 가능한 스크롤 동작

(네이티브 앱같은 분위기를 내려면 spa가 좋지만 검색엔진 같은 분위기로는 spa는 좋은 선택이 아닐 수도 있다.)

 <div id="app">
      <h1>안녕하세요</h1>
      <p>
        라우터사용
        <router-link to="/main">메인페이지</router-link>
        <router-link to="/sub">서브페이지</router-link>
      </p>
      <hr />
      <router-view></router-view>
    </div>
    <script>
      const tmMain = {
        template: `<h2>메인페이지</h2>`,
      };
      const tmSub = {
        template: `<h2>서브페이지</h2>`,
      };
      const rtRouter = [
        {
          path: "/main",
          component: tmMain,
        },
        {
          path: "/sub",
          component: tmSub,
        },
      ];
      //라우터 인스턴스를 생성하고 'routes'옵션을 전달
      // 'router'객체변수는 라우터 인스턴스이면서 Vue생성 시 옵션으로 사용되므로 변수 이름은 반드시 'router'사용
      const router = new VueRouter({
        routes: [...rtRouter],
      });

      // 뷰 루트 인스턴스를 만들고 router 옵션 추가
      const app = new Vue({
        el: "#app",
        router,
        //반드시 const router = new VueRouter({})에서 작성한 이름 사용
      });
    </script>

07. 새로 고침이 불피요한 SPA 만들기

싱글 페이지 앱(SPA, Single Page App)이란?

• 서버에 매번 요청하더라도 새로고침이 불필요
• 사용자의 서비스 경험속도가 훨씬 빨라짐 ex) 구글 지메일, 구글 맵, 페이스북, 트위터 등

router history mode는 주소표시줄에 #을 제거