Vue Router
- Vue.js 라이브러리를 사용한 싱글 페이지 어플리케이션(SPA)
- Vue Router를 사용하여 Vue로 만든 페이지 간 자유로운 이동 가능
- Vue Router 사용 방법
- npm install Vue-Router
- <script src="Vue Router 주소"></script>
- Vue Router 구현
- <router-view></router-view>
- url이 변경됨에 따라 해당 컴포넌트 display
- <router-link to='URL'>이동표시글자</router-link>
페이지 이동 태그, 화면에서는 <a> 태그의 역할
to는 a 태그의 href의 역할 수행
<!DOCTYPE html>
<html>
<head>
<title>Router Test</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<body>
<h1>Router Test Page</h1>
<hr>
<div id="routerdiv">
<router-link to="/login">로그인 클릭</router-link>
<router-link to="/about">궁금해 클릭</router-link>
<hr>
<router-view></router-view>
</div>
</body>
<script>
var LoginComponent = {
template: '<div>로그인 버튼을 클릭했습니다</div>'
}
var AboutComponent = {
template: '<div>궁금해 버튼을 클릭했습니다.</div>'
}
var router = new VueRouter({
routes: [
{
path: '/login',
component: LoginComponent
},
{
path: '/about',
component: AboutComponent
}
]
});
var app11 = new Vue({
el: '#routerdiv',
router: router
})
</script>
</html>
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [Vue.js] Component(advanced) (0) | 2024.12.05 |
|---|---|
| [Vue.js] Axios (0) | 2024.12.05 |
| [Vue.js] 섭씨 화씨 계산기 만들기 (0) | 2024.12.04 |
| [Vue.js] form 요소 활용하기 (2) | 2024.12.04 |
| [Vue.js] class 속성 변경하기 (0) | 2024.12.04 |