728x90 Router3 [Vue] 초보자를 위한 Vue Router 완벽 가이드 Vue Router는 Vue.js에서 웹 앱의 페이지 이동을 관리하는 도구다.이 포스트는 Vue Router를 처음 접하는 초보자를 위해 Vue Router란 무엇인지, 왜 필요한지, 어떻게 사용하는지를 쉽게 설명한다.간단한 예제와 실생활 비유를 통해 개념을 익히고, 실제 코드를 따라 할 수 있도록 구성한다.키워드: Vue Router 초보, Vue 3 라우팅, SPA 페이지 이동.Vue Router란?Vue Router는 Vue.js 애플리케이션에서 페이지 이동을 구현하는 공식 라이브러리다. SPA(Single Page Application)에서 브라우저의 새로고침 없이 URL을 변경하고, 각 URL에 맞는 콘텐츠를 보여준다. 비유:Vue Router는 레스토랑 메뉴판과 같다. 손님이 “메뉴 1번(홈).. 2025. 4. 21. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. Vue.js 프로젝트 만들기 Node.js가 설치되어 있다는 가정 하에 간단히 정리하자면, 1. Vue.js 프로젝트 생성먼저, Vue.js 프로젝트를 생성합니다. Vue CLI를 사용하여 새로운 프로젝트를 만듭니다.npm install -g @vue/clivue create my-projectcd my-project 2. 필요한 패키지 설치Vue Router와 Vuex(상태 관리)를 사용할 경우 설치합니다.npm install vue-router vuex 2025. 2. 8. 이전 1 다음 728x90
