728x90
SPA에 필수 요소 Router
- new VueRouter 로 라우터 인스턴스 생성하고 Vue인스턴스에 router: router로 연결해준다.
- VueRouter 인스턴스에 routes 배열에 route 정보를 적어둔다.
<router-view></router-view>영역에서 컴포넌트가 뿌려진다.<router-link></router-link>는 to로 이동하는 Link 태그이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- router-link는 to로 이동하는 Link 태그-->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<!-- router-view 는 컴포넌트가 뿌려지는 영역-->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
let LoginComponent = {
template: '<div>login</div>',
};
let MainComponent = {
template: '<div>Main</div>',
};
let router = new VueRouter({
// 페이지의 라우팅 정보
mode: 'history',
routes: [
{
// 페이지의 url
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent,
},
{
path: '/main',
component: MainComponent,
},
],
});
new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>
'FrontEnd > Vue 2' 카테고리의 다른 글
| [Vue.js] Watch 속성 (0) | 2022.09.18 |
|---|---|
| [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding (0) | 2022.09.18 |
| [Vue.js] 데이터 바인딩, 디렉티브 (0) | 2022.09.18 |
| [Vue.js] Axios 라이브러리 (0) | 2022.09.18 |
| [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) (0) | 2022.09.15 |
| [Vue.js] 컴포넌트간 통신, Props, Event Emit (0) | 2022.09.15 |
| [Vue.js] Vue 인스턴스, 전역 컴포넌트, 지역 컴포넌트 (0) | 2022.09.15 |
| [Vue.js] 튜토리얼 따라하는데 시작부터 에러 (0) | 2022.09.10 |
댓글