Vue Router

Vue Router

웹 페이지 간의 이동을 하기 위해 이용됩니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to ="/main">Main Component</router-link>
        <router-link to ="/login">Login Component</router-link>
      </p>
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var Main_Data = { template: '<div>check main</div>' };
      var Login_Data = { template: '<div>check login</div>' };

      var routes = [
        { path: '/main', component: Main_Data },
        { path: '/login', component: Login_Data },
      ];

      var router = new VueRouter({
        routes
      });

      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

<router-link> : 해당 주소 끝에 링크를 추가합니다. ex) kimn.com /login

<router--view> : 갱신된 주소에 해당하는 화면을 보여줍니다.

$mount API : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 합니다.

각 컴포넌트를 클릭하면 해당 화면이 나타나게 됩니다.

이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <p>
          <router-link to ="/main">Component</router-link>
      </p>
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
    var UserProfile = { template: '<p>User Profile Component</p>' };
    var UserPost = { template: '<p>User Post Component</p>' };
    var Main_Data = { template: '<div>check main <router-view></router-view> </div>' };

    var routes = [
      { path: '/main', component: Main_Data ,
        children: [
        {
          path: 'posts',
          component: UserPost
        },
        {
          path: 'profile',
          component: UserProfile
        },
      ]},
    ];

    var router = new VueRouter({
      routes
    });

    var app = new Vue({
      router
    }).$mount('#app');
    </script>
  </body>
</html>

위에 했던 main 컴포넌트 주소 뒤에 /posts 와 /profile 컴포넌트를 하위 컴포넌트로 화면에 나타낸 소스입니다.

이러한 방식은 한 번에 더 많은 컴포넌트를 표시하는 데에 한계가 있습니다.

이러한 문제를 해결하는데 사용되는 뷰는 네임드 뷰입니다.

네임드 뷰

네임드 뷰는 특정 페이지로 이동했을 대 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
      <router-view name = "bodymain"></router-view>
      <router-view name = "footer"></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var Head = { template: '<div>Head Part</div>' };
      var Body = { template: '<div>Body Part</div>' };
      var Foot = { template: '<div>Foot Part</div>' };

      var router = new VueRouter({
        routes: [
          {
            path: '/',
            components: {
              default: Head,
              bodymain: Body,
              footer: Foot
            }
          }
        ]
      });

      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

라우터 script 부분에 기본 컴포넌트(default)와 그 외의 컴포넌트를 정의하여 화면에 표시합니다.

컴포넌트가 정말 중요한 것 같습니다.

vue 컴포너트를 잘 이용하면 여러 개의 html을 하나의 html로 나타낼 수 있으며, 더 정돈되게 할 수 있습니다.

저작자표시

'Develop > Vue' 카테고리의 다른 글

Vue 템플릿 (0)	2020.01.26
Vue HTTP 통신 (0)	2020.01.26
Vue 컴포넌트 (0)	2020.01.26
Vue 세팅하기 (0)	2020.01.26
[Nuxt.js] 설명 및 Nginx / PM2 연동 (0)	2020.01.26

'Develop > Vue' 카테고리의 다른 글

티스토리툴바