-
[Vue.js] Vue 라우터란?Vue 2019. 1. 20. 23:02
뷰 라우터란?
vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.
태그
설명
<router-link to="URL값">
페이지 이동 태그, 화면에선 <a> 태그로 치환됨
<router-view>
페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역
라우팅이란?
웹페이지간의 이동방법을 말함.
- 페이지를 이동할때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신함, 이러한 방식을 SPA라고도 함(Single Page Application)
- 라우팅을 이용하면 화면간의 전환을 매끄럽게 할 수 있음
- 뷰,리액트,앵귤러 모두 라우팅을 이용하여 화면을 전환함.
예제
- 뷰 라우터 라이브러리를 사용하기 위해서는 7행의 라우터 CDN 추가를 해준다.
- 35행의 $mount() api는 el 속성과 같은 역할을 한다. vue 라우터 공식문서에서는 인스턴스 안에 el을 지정하지 않고, $mount()를 이용 해서 붙이는 방식으로 안내하고있음.
12345678910111213141516171819202122232425262728293031323334353637383940<!DOCTYPE html><html lang="en" dir="ltr"><head><!--vue --><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><title>뷰 라우터</title></head><body><div id="app1"><router-link to="/main"> main 컴포넌트로 이동</router-link><router-link to="/login"> login 컴포넌트로 이동 </router-link><hr><!--해당 영역에 갱신된 URL에 해당하는 화면을 --><router-view></router-view></div><script>var Main = {template:'<div> 메인 </div>'};var Login = {template:'<div>로그인</div>'};var routes =[{path:'/main', component: Main},{path:'/login', component: Login}];var router = new VueRouter({ //라우터 생성routes});var app = new Vue({ // 객체생성router}).$mount('#app1'); // el속성과 같이 동일하게 인스턴스를 화면에 붙이는 역할</script></body></html>cs 결과화면
- 누르는 링크에 따라 URL이 변하고 해당 컴포넌트를 보여 주게된다.
URL 해시값(#) 지우기
- 위 이미지에 URL을 보면 라우터 URL에 해시값(#)이 붙게되는대 뷰 라우터의 mode속성에 'history'를 주면 #이 없어지게 된다.
123456789<script>var router = new VueRouter({ //라우터 생성mode: 'hisotry' // 해시값을 없앤다.routes});</script>cs 'Vue' 카테고리의 다른 글
[Vue.js] Vue Http 통신, 엑시오스(axios)란? (0) 2019.01.21 [Vue.js] 네임드뷰 (0) 2019.01.21 [Vue.js] Vue 컴포넌트 데이터 주고 받기 (0) 2019.01.14 [Vue.js] Vue 인스턴스의 라이프 사이클 (0) 2019.01.13 [Vue.js] Vue 컴포넌트란? (0) 2019.01.13
