5. 라우터

뷰 라우터

Vue로 SPA(Single Page Application)를 구현할 때 사용하는 라우팅 라이브러리

<div id="app">
  <router-link to="/login">Login</router-link> //링크를 클릭해서 페이지를 이동
  <router-link to="/main">Main</router-link>
  <router-view></router-view> // URL 변경시, routes속성에서 해당URL에 연결된 컴포넌트가 화면에 표시되는 부분
</div>
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
<script src="<https://unpkg.com/vue-router/dist/vue-router.js>"></script>
<script>
  const LoginComponent = {
    template: "<div>login</div>",
  };
  const MainComponent = {
    template: "<div>main</div>",
  };
 
  const router = new VueRouter({
    //페이지의 라우팅 정보
    routes: [
      {
        // path: url,
        // component: url에 표시될 컴포넌트,  
      },
      {     
        path: "/login",
        component: LoginComponent,
      },
      {
        path: "/main",
        component: MainComponent,
      },
    ],
  });
  new Vue({
    el: "#app",
    router: router, //뷰 인스턴스에 router를 연결
  });
</script>

router-view

브라우저의 주소창에서 URL이 변경되면, routes 속성에 따라 해당 컴포넌트가 화면에 표시된다.
이 때 표시되는 지점이 템플릿 안의 부분

router-link

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 하는 부분이 이다.
위 코드를 실행하면 브라우저에서는 태그로 변형되서 나온다.