Vue.js - Router
router Intro
: 뷰를 이용하여 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이브러리
뷰에서 화면이 전환될 때, 전환하는 행위를 Route
Vue Router CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
router 옵션
routes
: 페이지의 라우팅 정보를 담는 배열 형태, 페이지의 수만큼 객체 생성
1.path
: 페이지의 url
2.component
: 해당 url에 표시될 컴포넌트
router-view
- 특정 url의 component가 뿌려지는 영역
router-link
- 화면 클릭을 통해 페이지 이동할 수 있게 하는 링크
- a 태그와 비슷한 기능
<router-link to="이동할 URL"></router-link>
router 예제
<div id="app">
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
var router = new VueRouter({
// 페이지의 라우팅 정보
routes : [
// 로그인 페이지 정보
{
path: '/login',
component: LoginComponent
},
// 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: router
});
</script>
Vue 인스턴스
- 왼쪽 router는
인스터스 속성
, 오른쪽 router는변수
Author And Source
이 문제에 관하여(Vue.js - Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sjkim_jinnyk/Vue.js-Router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)