홍준혁

Vue.js-Router(뷰 라우터) 본문

Vue.js

Vue.js-Router(뷰 라우터)

홍준혁 [Hong-JunHyeok] 2020. 9. 21. 20:28
728x90

 

라우팅이라는 것은 웹 사이트이동 방법을 의미한다.

웹사이트간의 이동이 매끄러워야 사용자 경험이 향상된다.

라우팅을 사용하면 화면 깜빡임 없이 바로 화면을 넘겨줄 수 있다.

그래서 라우팅이라는 것은 굉장히..까지는 아니고 중요하다고 볼 수 있다.

 

싱글 페이지 애플리케이션이라고 페이지를 이동할 때 마다 서버에 요청해서 갱신하는게 아니라 

미리 해당 페이지들을 받아놓고 이동시에 바로바로 이동할 수 있도록 해준다.

 

뷰 라우터를 사용하기 위해 

<router-link to="URL"> 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정된 URL로 이동함
<router-view> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 역활이다.

위 두 태그를 읽고 가보자 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
    </head>
    <body>
        <div id="app">
            <h1>뷰 라우터 예제</h1>
            <p>
                <router-link to="/main">Main컴포넌트로 이동</router-link>
                <router-link to="/login">login컴포넌트로 이동</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
        <script>
            var Main = { template: "<div>main</div>" };
            var Login = { template: "<div>login</div>" };
            //main , login 컴포넌트 정의

            var routes = [
                { path: "/main", component: Main },
                { path: "/Login", component: Login },
            ];

            var router = new VueRouter({
                routes,
            });

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

 

처음보는 코드들이 등장했다.

CDN으로 라우터 Vue를 추가해주었다.

 

실행해보면 새로고침을 하지 않아도 바로바로 빠릿빠릿하게 이동하는 모습을 볼 수 있다.

F12를 누르고 router-link를 보면 a태그로 바껴있는 모습을 볼 수 있다.

 

그래서 클릭해보면 to=""에 정의되어 있는 값이 href에 정의되어 있다.

 

router-view는 갱신된 URL에 해당하는 화면을 보여주는 영역이다.

이때, 나타낼 화면은 script에서 정의한다.

 

현제 스크립트에서 기능을 하는것은 

  • Main,Login컴포넌트를 정의하는 부분
  • URL값에 따라 표시될 컴포넌트를 지정하는 routes 부분
  • 뷰 라우터에 routes를 연결하는 부분 
  • 뷰 인스턴스를 생성해 라우터를 삽입하는 부분 

이렇게 크게 4가지가 있다.

 

컴포넌트 정의
URL값에 따라 표시될 컴포넌트를 지정하는 부분
Vue 라우터에 routers를 연결하는 부분
라우터를 뷰 인스턴스에 삽입하는 부분 

마지막의 코드에서 $mount는 el 속성과 같이 인스턴스를 화면에 붙여주는 역활을 한다. 

즉 ,

 

위의 코드와 같은 역활을 한다는 것이다.

 

그러면 $mount를 사용하는 이유는 무엇일까?

 

이렇게 사용해도 문제는 없는데 하지만 $mount를 사용하는 이유가 있다.

 

...

..

.

 

음... 이유는 사실 모르지만 공식 문서에서 이렇게 설명하고 있다.

그럼 그렇게 써야겠다. ㅎㅎ

 

여기까지가 라우터의 기본이다.

한 화면에 컴포넌트 1개만 표시하면 되기 때문에 어렵지는 않았지만 실제 업무를 할때는 

여러개의 컴포넌트로 분활된 경우가 많다. 

 

여기서 여러 개의 컴포넌트를 동시에 표현할 수 있는 라우터인 

네스티드 라우터와 네임드 뷰를 알아볼것이다.

 

다음시간에뿅 

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-네임드 뷰  (0) 2020.09.22
Vue.js-네스티드 라우터  (0) 2020.09.21
Vue.js-하위에서 상위 컴포넌트로 데이터 전달  (0) 2020.09.21
Vue.js 상위-하위 컴포넌트 데이터 전달  (0) 2020.09.21
Vue.js-watch속성  (1) 2020.09.14
'Vue.js' Related Articles more
Comments