728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
5. router
1) VueRouter 인스턴스 생성
2) 컴포넌트의 router 속성을 통해 router와 컴포넌트 연결
3) router의 속성을 정의(path와 component)
- path는 url 뒤에 path 경로를 더 쓰면 해당 component가 보인다.
- component는 보여준 component
4) <router-link to="경로">는 a태그와 비슷한데, url/경로 주소로 보낸다
<router-view>는 라우터 컴포넌트가 보여질 영역이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!--a태그와 같은 페이지 이동 태그-->
<router-link to="/login">Login</router-link>
<!-- <a href="/login">Login</a> -->
<router-link to="/main">Main</router-link>
</div>
<!-- router 컴포넌트가 뿌려질 영역-->
<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>
let LoginComponent = {
template: '<div>login</div>'
}
let MainComponent = {
template: '<div>Main</div>'
}
let routergg = new VueRouter({
// 페이지의 라우팅 정보가 배열로 담김
routes: [
{
// 페이지의 url
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: routergg
});
</script>
</body>
</html>728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 7. 템플릿 문법 (0) | 2021.01.25 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 6. axios (0) | 2021.01.24 |
| [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 3. 컴포넌트 (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 2. 인스턴스 (0) | 2021.01.23 |
댓글