반응형
router를 쓰고 router의 url로 이동하면
<router-view> 태그 안에 router 의 해당 url 컴포넌트가 출력된다
<!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">
<router-view>
</router-view>
</div>
<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>
<script>
var LoginComponent = {
template: '<div>login</div>',
}
var mainComponent = {
template: '<div>main</div>'
}
// 공식문서에서 router라고 변수명 많이 넣음
var router = new VueRouter({
// 페이지의 라우팅 정보 (어떤 URl에 이동했을때 어떤 속성이 뿌려질지 라우터에 배열로 저장)
routes: [
//페이지의 갯수만큼 배열안에 객체가 필요함
//로그인 페이지 정보
{
//페이지의 URL이름
path: '/login',
//해당 url에서 표시될 컴포넌트
component: LoginComponent
},
//메인 페이지 정보
{
path: '/main',
component: mainComponent
}
]
});
new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 33. 컴포넌트 설계 방법 (0) | 2022.07.18 |
|---|---|
| 13. 라우터 정리 및 학습 방향 (0) | 2022.07.09 |
| 9. 뷰 라우터 소개와 설치 (0) | 2022.07.09 |
| 6. 전역 컴포넌트 | 지역 컴포넌트 | 컴포넌트와 인스턴스의 관계 | Props 속성 (0) | 2022.07.07 |
| 5. 인스턴스 옵션과 속성 | 인스턴스와 컴포넌트 | 뷰 컴포넌트란? (0) | 2022.07.05 |