반응형 Router3 Vue.js 완벽가이드 : (5) 라우터 고급 5. 라우터 실전 5-1. User 상세 페이지 구현 사용자를 클릭했을 때 사용자 상세정보를 확인하는 기능을 추가하겠습니다. Dynamic Route Matching을 알아봅니다. 우선 api/index.js에 API를 추가합니다. import axios from 'axios'; // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/' } // 2. API 함수들을 정리 function fetchNewsList() { // return axios.get(config.baseUrl + 'news/1.json'); // ES6 스타일 return axio.. 2020. 4. 23. Vue.js 완벽가이드 : (2) 라우터 기본 2. 라우터 기본 2-1. 라우터 설치 및 구현 터미널을 열어 npm i vue-router --save를 입력해봅시다. package.json에서 dependencies항목에 vue-router을 확인 할 수 있습니다. main.js 코드 내 router을 추가할 수 있습니다. import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') const router = new VueRouter({ routes: [ ] }) new Vue({ render: h => h(Ap.. 2020. 4. 23. Vue.js 시작하기 : (3) Router & Axios 라우터 & Axios 5. 라우터 Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 아래의 기능을 포함합니다. 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 5-1. 라우터 코드 정의 new VueRouter({}) 를 이용하여 라우터 인스턴스를 정의할 수 있습니다. 그리고 new Vue({}) 객체의 router 속.. 2020. 4. 23. 이전 1 다음 반응형
