Vue.js (3) 썸네일형 리스트형 [Vue.js] Router(라우터) 기능에 대해서 알아보자. Vue.js 라우터란?? -vue.js 공식 라우터. -페이지간 전환을 스무스하고 쉽게 구현해주는 라이브러리. -페이지 이동 시 URL이 변경되면, 변경된 요소의 영역에 컨포넌트를 갱신함. -SPA(Single Page Application)의 특징으로 DOM을 새로 갱신하는 것이 아님. 폴더 구조 ├── router │ └── index.js ├── App.vue └── main.js 주요 기능 1. 라우트 정의와 컴포넌트 매핑 : routes 배열을 정의하여 각 URL에 맞는 컴포넌트를 매핑함. : path 속성으로 경로를, component 속성으로 매핑할 컴포넌트를 지정함. (이 두 속성 필수로 작성해애함.) import Vue from 'vue' import VueRouter from 'vue-.. [Vue.js] Router(라우터)에 대해서 알아보자. Vue Router란 Vue.js 애플리케이션에서 사용하는 공식 라우팅 라이브러리입니다. 이 라이브러리를 사용하면 SPA(Single Page Application)에서 페이지간 전환을 스무스하고 쉽게 구현할 수 있습니다. Vue Router는 라우트를 정의하고, 각 라우트에 맞는 컴포넌트를 매핑하며, 라우트 간 전환을 처리하는 라우팅 시스템을 제공합니다. 이를 통해 사용자가 애플리케이션에서 다른 페이지로 이동할 때마다 새로운 페이지를 로드하지 않고도 페이지간 전환을 새로고침 없이 부드럽게 처리할 수 있습니다. 예를들어 사용자가 /about이라는 페이지를 URL로 요청하면 /about 페이지를 보여주도록 컴포넌트를 '지정'하는 것을 라우트 정의라고 합니다. 이 라우터 정의 후 사용자의 URL 요청에 맞는.. [Vue.js] Vue3 CLI를 설치해보자. 1. node.js 설치 vue3 cli를 설치하려면 먼저 최신 버전의 node.js가 설치되어 있어야 합니다. https://nodejs.org/en/download/ 해당 링크에서 운영체제에 맞는 node.js를 먼저 다운로드하세요. 2. 설치 확인 node.js가 성공적으로 설치가 완료되었는지 확인하기 위해서는 작업용 폴더를 하나 만든 후에 vscode를 통해서 해당 폴더를 오픈합니다. 그리고 vscode의 terminal을 켜서 npm -v 위 명령어를 입력합니다. 설치가 성공적으로 완료되었다면 설치 버전을 알려주는 코드가 등장합니다. (사진) 3. vue3 cli 설치 npm install -g @vue/cli npm을 사용하여 vue cli를 전역으로 설치하는 명령어로, 위 명령어를 입력하면 .. 이전 1 다음
