Vue.js 공부 기록(10) - 뷰 라우터(vue-router), 싱글 파일 컴포넌트(Single File Component)

🔍뷰 라우터(Vue-router)란

• 싱글 페이지 애플리케이션(SPA)

여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는 방식.

• 뷰 라우터(vue-router)

Vue.js에서 SPA 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인.

• 뷰 라우터 설치

npm install vue-router //vue router 설치

import Vue from 'vue'
import VueRouter from 'vue-router'	//main.js 추가

 

🔍뷰 라우터(Vue-router) 동작 방식

vue 설치 후 폴더 구조를 보면 아래와 같이 html 파일은 index.html 단 하나로 구성되어 있다.(SPA)

index.html에서 id로 app을 매핑하고 app.vue에서

각 라우터 매핑하여 동작함.

기존에 링크 이동 기능 구현 시에는 <a href> 태그를 사용했는데 라우터 매핑 시에는 <router-link> 태그를 사용함.

🔍싱글 파일 컴포넌트(Single File Component)

• 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 .vue 확장자를 가진 파일을 말한다.
• <template>
• <script>
• <style>

총 3가지 요소로 구성됨.

아래와 같이 수정 후 실행해 보면

이러한 화면이 잘 뜬다.

<style> 태그에 scoped라는 속성은 다른 컴포넌트 말고 해당 컴포넌트에만 스타일 속성을 적용하겠다는 뜻이다. 대부분 경우 scoped 속성을 함께 사용하고 있다.

글자가 빨간색으로 잘 변경되었다.

CodeArchive.vue 파일 생성

생성된 싱글 파일 컴포넌트를 사용하려면 아래와 같이 import해주어야 한다.

버튼 클릭 이벤트가 잘 작동한다.