Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- javascript
- Vue.js
- Python
- implementaion
- greedy
- algorithm
- floyd washall
- 1012
- 코테
- DFS
- 출처:장기효vue.js
- programming
- simulation
- 백준
Archives
- Today
- Total
DevDave
Vue Router 본문
뷰라우터(페이지 이동 기능)
뷰라우터는 뷰 라이브러리를 이용하여 싱글페이지 어플리케이션을 구현할 때 사용하는 라이브러리
router-view
브라우저의 주소창에서 URL이 변경되면, 앞에서 정의한 routes속성에 따라 해당 컴포넌트가 화면에 뿌려진다. 이때 뿌려지는 지점이 템플릿의 <router-view>이다.
router-link
라우터에서 페이지 이동을 위한 링크 태그
일반적으로 웹페이지에서 페이지 이동을 할 때는 사용자가 URL을 다쳐서 이동하지 않습니다. 이때 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link> 이다.
<예시코드>
<!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>
<router-link to="/login">Login</router-link>
<router-link to ="/main">Main</router-link>
</div>
<router-view></router-view>
</div>
<!--첫번째로 vue를 script로 넣는다-->
<!--두번째로 router를 script로 넣는다.-->
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
// 라우터 인스턴스 생성
var router = new VueRouter({
//routes속성 - 페이지의 라우팅 정보(어떤 url로 갈때 연결되는 component 정보)[배열로]
routes: [{
// 로그인 페이지 정보
//페이지 URL
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},{
// 메인 페이지 정보
path: '/main',
component: MainComponent
}]
});
// 인스턴스에 라우터 인스턴스 등록
new Vue({
el:'#app',
router: router
})
</script>
</body>
</html>
'Vue.js' 카테고리의 다른 글
| 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2023.08.23 |
|---|---|
| COMPONENT, PROPS, EVENT,this (0) | 2023.07.14 |
| Object.defineProperty() (0) | 2023.07.13 |
| IIFE(즉시 실행함수) (0) | 2023.07.13 |
| 다시 (0) | 2023.07.13 |
'Vue.js' Related Articles
more
