안녕하세요~ Vue.js의 라우터 페이지 이동 사용 방법에 대해 알아보겠습니다.
Vue.js는 SPA(Single Page Application)를 개발할 때 사용되는 프론트엔드 프레임워크 중 하나입니다.
그리고 이 SPA에서 페이지를 이동하는 방법 중 하나가 라우터를 이용하는 것입니다. Vue.js의 라우터는 페이지 이동과 관련된 기능을 제공하며, 라우터를 사용하면 사용자 경험을 개선할 수 있습니다. 이번 포스트에서는 Vue.js의 라우터를 사용하여 페이지 이동하는 방법을 알아보겠습니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue router</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>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
var router = new VueRouter({
// 페이지으ㅢ 라우팅 정보
routes: [
// 로그인 페이지 정보
{
// 페이지의 url
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
// 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el : '#app',
router: router
});
</script>
</body>
</html>
설명
위 코드는 Vue.js에서 라우팅을 구현하는 예시입니다.
Vue.js에서는 Vue Router를 사용하여 페이지 이동을 관리할 수 있습니다.
Vue Router는 라우터 링크와 뷰를 통해 페이지 이동을 가능하게 합니다. 이 예시에서는 LoginComponent와 MainComponent라는 두 개의 컴포넌트를 정의하고, 각각 로그인 페이지와 메인 페이지에서 표시됩니다. 라우터는 routes 배열을 통해 페이지의 정보를 관리합니다. 각 페이지는 path와 component로 구성되며, path는 페이지의 URL, component는 해당 URL에서 표시될 컴포넌트를 지정합니다. Vue 인스턴스에서는 router 속성을 통해 라우터를 등록합니다. Vue.js를 사용하면 SPA(Single Page Application)를 쉽게 구현할 수 있습니다.
감사합니다.
https://www.inflearn.com/course/age-of-vuejs/dashboard
Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., [사진] Vue.js 시작하기,Ag
www.inflearn.com
'개발 > vue.js' 카테고리의 다른 글
| vue.js 템플릿 문법 바인딩, v-if, v-show (1) | 2023.10.21 |
|---|---|
| vue.js 같은 컴포넌트 레벨 통신방법 방법 (0) | 2023.10.14 |
| vue.js instance 와 event-emit 이해하기 (0) | 2023.10.12 |
| vue.js component(컴포넌트)와 props 무엇인가? (0) | 2023.10.11 |
| vue.js 시작하기 (1) | 2023.10.09 |
