송민준의 개발노트

뷰 라우터 본문

웹/Vue

뷰 라우터

송민준 2020. 2. 2. 20:11 
npm i vue-router --save

라우팅?

 웹 페이지 간의 이동 방법. 현대 웹 앱 형태 중 하나인 싱글 페이지 어플리케이션에서 주로 사용

더보기

싱글 페이지 어플리케이션

페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아닌 미리 받아 놓고 페이지 이동 시 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션

 

뷰 라우터

 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 태그는 다음과 같음

<router-link to = "URL 값">
페이지 이동 태그. <a>로 표시됨. 클릭하면 URL로 이동
<router-view>
페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Router</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <router-link to="/main">Main 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
      </p>
      <!-- URL 값에 따라 갱신되는 영역-->
      <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      // Main, Login 컴포넌트 정의
      var Main = {template: '<div>main</div>'};
      var Login = {template: '<div>login</div>'};
      // 각 URL에 맞춰 표시할 컴포넌트 지정
      routes = [
        {path: '/main', component:Main},
        {path: '/login', component:Login}
      ];
      // 뷰 라우터 정의
      var router = new VueRouter({
        routes
      });
      // 뷰 인스턴스에 라우터 추가
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

* mount API

 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하여 강제로 인스턴스를 화면에 붙일 수가 있다. 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내하고 있습니다.

 

* URL을 보면 #값이 붙어있다.

제거를 위해서는 아래와 같이 mode를 추가해준다.(히스토리 모드를 활용)

      var router = new VueRouter({
        mode : 'history',
        routes
      });

 

 

네스티드 라우터(Nested Router)

 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음. 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다. 이에 대한 해결방안으로 네임드 뷰가 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Router</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <!-- User 컴포넌트가 뿌려질 영역-->
      <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>

      var User = {
        template: `
          <div>
            User Component
            <router-view></router-view>
          </div>
        `
      };
      var UserProfile = {template: '<p>User Profile Component</p>'};
      var UserPost = {template: '<p>User Post Component</p>'};

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

      var router = new VueRouter({
        routes
      });

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

 

네임드 뷰(Named View)

 네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 앞에서 다룬 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만 네임드뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Named view Router</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <router-view name="header"></router-view>
      <router-view></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="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var Body = {template: '<div>This is Body</div>'};
      var Header = {template: '<div>This is Header</div>'};
      var Footer = {template: '<div>This is Footer</div>'};

      var LoginBody = {template: '<div>This is LoginBody</div>'};
      var LoginHeader = {template: '<div>This is LoginHeader</div>'};
      var LoginFooter = {template: '<div>This is LoginFooter</div>'};

      var router = new VueRouter({
        routes: [
          {
            path: '/',
            components: {
              default: Body,
              header: Header,
              footer: Footer
            }
          },
          {
            path: '/login',
            components: {
              default: LoginBody,
              header : LoginHeader,
              footer : LoginFooter
            }
          }
        ]
      });

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

* name 속성은 예약어가 아니며 name 속성을 따로 지정하지 않으면 default 로 접근한다.

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

뷰 템플릿  (0) 2020.02.09
뷰 리소스, 액시오스  (0) 2020.02.08
컴포넌트 통신  (0) 2020.01.31
컴포넌트  (0) 2020.01.31
라이프 사이클  (0) 2020.01.31
'웹/Vue' Related Articles more