-
Router 관련 정리VUE.JS 2020. 5. 3. 00:17
Vue 라우터는 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.
Router를 이용하여 여러가지 URL과 매핑을 할 수 있다.
Vue 라우터를 사용하려면 CDN을 사용하는 방법과 프로젝트에 vue-router를 설치하여 사용하는 방법이 있다.
아래 예제 소스는 CDN을 사용하였다.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><div><router-link to="/login">Login</router-link> <!-- Router 링크--><router-link to="/main">Main</router-link></div><router-view></router-view> <!-- LoginComponent 또는 HomeComponent --></div><script>var LoginComponent = {template: '<div>login</div>'}var MainComponent = {template: '<div>main</div>'}var router = new VueRouter({// 페이지의 라우팅 정보routes: [// 로그인 페이지 정보{// 페이지의 urlpath: '/login',// name: 'login',// 해당 url에서 표시될 컴포넌트component: LoginComponent},// 메인 페이지 정보{path: '/main',component: MainComponent}]});new Vue({el: '#app',router: router,});</script></body></html>http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter아래와 같이 싱글페이지 어플리케이션 웹페이지 구현이 가능하다.
'VUE.JS' 카테고리의 다른 글
데이터 바인딩 및 Computed (0) 2020.05.03 axios(ajax) 관련 예제 (0) 2020.05.03 emit & props를 이용한 같은 레벨의 component 데이터 통신 (0) 2020.04.30 emit 개념 관련 정리 (0) 2020.04.30 Props 관련 예제 및 실습 (0) 2020.04.26