MOYA

MOYA



즐거움을 추구하는 개발자 MOYA 입니다.

4 minute read


1. Vue Router(뷰 라우터)

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

뷰 라우터를 사용하면 뷰로 만든 페이지 간에 자유롭게 이동이 가능하다.

태그 설명
router-link to=”URL” 페이지 이동 태그. 화면에선 a 태그로 보이며 to에 지정한 URL로 이동
router-view 페이지 표시 태그. URL에 따라 해당 컴포넌트를 뿌려줌 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div id="app">
  <h1>뷰 라우터 예제</h1>
  <p>
    <!-- URL 값을 변경하는 태그 -->
    <router-link to="/main">Main 컴포넌트로 이동</router-link>
    <router-link to="/login">Login 컴포넌트로 이동</router-link>
  </p>
  <!-- URL 값에 따라 변환되는 화면 영역 -->
  <router-view></router-view>
  <div>안녕</div>
  <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에 해당하는 컴포넌트 등록
  var routes = [
    { path: '/main', component: Main },
    { path: '/login', component: Login }
  ];

  //뷰 라우터 정의
  var router = new VueRouter({
    mode : 'history',
    routes : routes,
  });

  //뷰 라우터를 인스턴스에 등록
  var app = new Vue({
    router : router,
  }).$mount('#app');
</script>

컴포넌트의 내용을 정의하고 각 url에 해당하는 컴포넌트를 등록해준다. 이후, 등록한 컴포넌트를 뷰 라우터를 생성하여 연결하고 인스턴스에 붙여주면 링크를 눌렀을 때 컴포넌트의 내용이 영역에 나타나게 된다.

기존과는 다르게 인스턴스에 el을 사용하지 않고 $mount를 사용했는데 역할은 동일하다. $mount를 사용하면 el을 사용하지 않고도 강제로 인스턴스를 화면에 붙일 수 있다.

위 코드를 실행하면 Main과 Login으로 이동하는 div가 화면에 보일 것이고 해당 div를 누르면 화면의 깜빡임 없이 URL 끝이 변하는 것을 확인할 수 있다.


2. Router를 활용한 페이지 이동 방법

위에서 Vue Router를 사용해서 컴포넌트로 이동하는 방법을 알아봤다. 하지만 위와 같이 를 사용하지 않고도 컴포넌트 이동(화면 전환)을 할 수 있는 방법이 있다. Router에서 제공하는 메소드를 사용하는 방법인데 아래 설명을 보자.


2.1 $router.push

push는 를 사용한 것과 같은 결과를 갖는 옵션이다. push를 사용하면 히스토리 스택이 쌓이게 되며 뒤로가기를 실행한 경우 순차적으로 스택에 쌓여있던 페이지가 보이게 된다.

1
2
3

this.$router.push('/main');

//<router-link to="/main">Main</router-link> 실행 결과와 같음

컴포넌트 이동을 통해 화면을 전환할 수 있을 뿐만 아니라 호출할 화면에서 필요한 데이터를 함께 넘겨줄 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

this.$router.push({
  path: '/main',
  query: {
    food : 'pizza',
    drink : 'bear'
  }
});


//Main.Vue 
data(){
  return{
    food: '',
    drink: '',
  }
}
mounted : function(){
  const { food, drink } = this.$route.query;
  this.food = food;
  this.drink = drink;

  console.log(this.food, this.drink);     //result : pizza, bear
},


2.2 $router.replace

replace 역시 push와 마찬가지로 화면 전환을 시키지만 히스토리 스택이 쌓이지 않는다는 차이가 있다. 현재 스택을 유지하고 페이지만 전환하고 싶을 때는 replace를 사용한다.

1

this.$router.replace('/main');


2.3 $router.go

go는 인자로 넘긴 수만큼 히스토리 스택에서 앞, 뒤의 페이지로 이동할 수 있다. 인자로 넘긴 수가 음수인 경우 이전 페이지로, 양수인 경우 다음 페이지로 넘어가게 된다. 하지만 해당 숫자가 URL 스택에 존재하지 않는 경우 화면 전환에 실패한다.

1
2
3

this.$router.go(1);        // 다음 페이지로 1번
this.$router.go(-1);       // 이전 페이지로 1번
this.$router.go(-3);       // 이전 페이지로 3번



3. Nested Router(네스티드 라우터)

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있는 라우터로 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 구성되어 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 <div id="app">
  <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.5.3/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>

위의 샘플코드를 보면 상위 컴포넌트 User에 하위 컴포넌트로 UserPost와 UserProfile을 등록해서 보여주고 있다.

코드를 실행하면 빈화면이 보이고 url 뒤쪽에 /user를 입력하면 User 컴포넌트에 선언한 “User Component”가 보이게 된다. 마찬가지로 User 컴포넌트가 보이는 상황에서 url 뒤쪽에 /posts 또는 /profile을 입력하게 되면 하위 컴포넌트인 UserPost와 UserProfile에 선언한 텍스트가 보이게 된다.



4. Named View(네임드 뷰)

2개 이상의 컴포넌트를 화면에 나타내기 위해 네스티드 뷰를 알아보았다. 하지만 네스티드 뷰는 컴포넌트의 수가 많아지면 효율성이 떨어진다. 그래서 컴포넌트의 개수가 많아지면 네임드 뷰를 사용한다.

네임드 뷰란 특정 페이지로 이동했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.
네스티드 뷰는 상위 컴포넌트가 하위 컴포넌트를 포함하고 있는 방식이었지만 네임드 뷰는 동일 레벨에서 다수의 컴포넌트를 한번에 표시할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<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 router = new VueRouter({
    routes: [
      {
        path: '/',
        components: {
          default: Body,
          header: Header,
          footer: Footer
        }
      }
    ]
  })

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



You may also enjoy

1 minute read