SPA에 필수 요소 Router

new VueRouter 로 라우터 인스턴스 생성하고 Vue인스턴스에 router: router로 연결해준다.
VueRouter 인스턴스에 routes 배열에 route 정보를 적어둔다.
<router-view></router-view> 영역에서 컴포넌트가 뿌려진다.
<router-link></router-link> 는 to로 이동하는 Link 태그이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <!-- router-link는  to로 이동하는 Link 태그-->
        <router-link to="/login">Login</router-link>
        <router-link to="/main">Main</router-link>
      </div>
      <!-- router-view 는 컴포넌트가 뿌려지는 영역-->
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
      let LoginComponent = {
        template: '<div>login</div>',
      };

      let MainComponent = {
        template: '<div>Main</div>',
      };

      let router = new VueRouter({
        // 페이지의 라우팅 정보
        mode: 'history',
        routes: [
          {
            // 페이지의 url
            path: '/login',
            // 해당 url에서 표시될 컴포넌트
            component: LoginComponent,
          },
          {
            path: '/main',
            component: MainComponent,
          },
        ],
      });
      new Vue({
        el: '#app',
        router: router,
      });
    </script>
  </body>
</html>

저작자표시 (새창열림)