728x90
모든 예제 코드는 github에 있습니다.
6. 라우터
뷰 라우터 소개와 설치
- 라우터 공식 사이트 설치 문서
- 싱글 페이지 애플리케이션을 구현하거나, 혹은 페이지 간의 이동할때 사용하는 라이브러리
- 라우터 CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>뷰 라우터 인스턴스 연결 및 초기 상태 안내
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Router</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<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>
const router = new VueRouter({
routes: [
{
path: "",
component: "",
},
],
});
const vm = new Vue({
el: "#app",
router: router
});
</script>
</html>routes 속성 설명 및 실습 안내
routes : 페이지의 라우팅 정보가 배열로 담기게 된다.
path : 페이지 url 이름
component: 해당 url에서 표시될 컴포넌트
실습
url이 main인 페이지를 만들어
<div>main</div>컴포넌트가 나올 수 있도록 해보자.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Router</title> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <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> const main = { template: "<div>main</div>", }; const router = new VueRouter({ routes: [ { path: '/main', component: main, }, ], }); const vm = new Vue({ el: "#app", router: router, }); </script> </html>
라우터가 표시되는 영역 및 router-view 태그 설명
- router-view : 라우터가 가지고 있는 태그로 뷰 인스턴스를 라우터 인스턴스를 지정해야 사용할 수 있는 태그로, 해당 path로 접속했을 때 등록한 컴포넌트를 나타낸다.
링크를 이용한 페이지 이동 및 router-link 태그 설명
- UX적으로 화면에 링크를 제공해줘야 해당 컴포넌트들을 보고 홈페이지를 이용하는데 그때 사용하는 태그이다.
- 랜더링 할때 a 링크로 나타나게 된다.
<router-link to="/login">Login</router-link>
===========================================
<a href="/login">Login</a><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Router</title>
</head>
<body>
<div id="app">
<router-link to="/main">main</router-link>
<router-view></router-view>
</div>
</body>
<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>
const main = {
template: "<div>main</div>",
};
const router = new VueRouter({
routes: [
{
path: "/main",
component: main,
},
],
});
const vm = new Vue({
el: "#app",
router: router,
});
</script>
</html>라우터 정리 및 학습 방향 안내
- 네비게이션 가드
- 라우터는 페이지를 이동 할때 사용하는 것이다.
- 페이지 관련된 기능들을 라우터를 이용해 기능을 구현한다.
- CDN방식을 사용했지만, CLI를 이용한다면 NPM으로 다운 받아 사용한다.
- 라우터 등록
// 라우터 인스턴스 생성
const router = new VueRouter({
// 라우터 옵션
~~}~~)
// 인스턴스에 라우터 인스턴스를 등록
new Vue({
router: rotuer
})- 라우터 옵션
- routes: 페이지의 정보
- path: 페이지 URL
- component : 페이지에 보여줄 컴포넌트(해당 페이지마다 보여줄 컴포넌트는 하나이다. 그래서 복수가 아니라 단수다.)
- mode: URL의 해쉬 값(#) 제거 속성
- routes: 페이지의 정보
const router = new VueRouter({
mode: 'history',
routes: [
{
path: "/login",
component: loginComponent,
},
{
path: "/main",
component: mainCompnent,
},
],router-view
<router-view></router-view>URL이 변경되면 routes 속성에 따라 component가 화면에 보여질텐데, 그 컴포넌트를 보여주는 태그이다.
router-link
<div> <router-link to="/login">login</router-link> <router-link to="/main">main</router-link> </div>- 사용자가 화면을 클릭해서 해당 페이지를 이동할 수 있게 한다.
728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 8. 템플릿 문법 (0) | 2020.07.05 |
|---|---|
| 7. HTTP 통신 라이브러리 - axios (0) | 2020.07.05 |
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
| 4. 컴포넌트 통신 방법 - 기본 (0) | 2020.07.05 |
| 3. 컴포넌트 (0) | 2020.07.05 |
