티스토리 뷰
라우팅이란?
라우팅이란 웹 페이지 간의 이동 방법을 말합니다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA,Single Page Application)에서 주로 사용합니다. 라우팅을 이용하면 화면간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상 시킬 수 있습니다. 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있습니다. (이러한 프런트엔드 프레임워크를 사용하지 않고 일반HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.)
*SPA : 페이지를 이동할때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션
뷰 라우터
뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.
<htlml>
<head>
<title>뷰 라우터</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<!--URL 값을 변경하는 태그-->
<router-link to="/main">main컴포넌트로이동</router-link>
<router-link to="/login">login컴포넌트로이동</router-link>
</p>
<!--URL 값에 따라 갱신되는 화면 영역-->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> <!--라우터 CDN 추가-->
<script>
//Main, Login 컴포넌트 정의
var Main = {template: '<div>main</div>'};
var Login = {template: '<div>login</div>'};
//각UrL에 맞춰 표시할 컴포넌트 지정
var routes = [
{path: '/main', component: Main},
{path: '/login', component: Login}
];
//뷰 라우터 정의
var router = new VueRouter({
routes
});
//뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</htlml>
화면의 깜빡임 없이 메시지와 링크가 변하는 것을 확인할 수 있다.
$mount() API?
el 속성과 동일하게 인스턴스에 화면을 붙이는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있다.
* 참고로 뷰 라우터 공식문서에서는 el을 지정하지 않고 라우터만 지정하여 생성한다음 $mount()를 붙이는 방식으로 안내하고 있다.
Tip. URL의 해시값(#)을 없애는 법
var router = new VueRouter({
mode: 'history',
routes
});'Front' 카테고리의 다른 글
| [Vue.js] 뷰 컴포넌트 통신 (0) | 2023.07.09 |
|---|---|
| [Vue]전역 인스턴스와 지역 인스턴스 (0) | 2023.06.11 |
| [Vue]뷰 인스턴스 생성 (0) | 2023.05.22 |
| [Vue]맥북 Vue 실습 환경설정 하기 (0) | 2023.04.06 |