router3 39. Vue - router 개념 정리 1. 페이지가 변경되면 해당 페이지의 컴포넌트가 출력되는 부분이자 컴포넌트 2. 페이지 이동을 위한 링크 컴포넌트 3. $route 페이지의 정보를 갖고 있는 객체 페이지가 가지고 있는 여러가지 속성값 들을 조회하는 용도 ex) route 객체를 통해 fullPath, params와 같은 페이지 정보를 확인할 수 있다. 4. $router 페이지를 조작하기 위해서 사용하는 객체 페이지를 조작하기 위해, 페이지를 router 객체가 갖는 여러가지 메소드를 사용하여 조작하는 용도 ex) RouterLink 대신 router객체의 push()메소드를 사용해서 페이지 이동을 구현할 수 있다. 5. URL 구조분석 a. fullpath란? - 페이지의 경로와 해당 페이지가 갖는 정보를 표현하는 부분 - $rout.. 2021. 6. 21. 32. Vue - Router Link 1. Router Link란? - 홈페이지를 만들면 네비게이션이라는 것을 만들게 된다. - 네비게이션은 쉽게 말하면 메뉴다. - 흔히 a태그를 이용해서 만들지만, Vue에서는 Router Link라는 컴포넌트를 사용하기를 권장한다. 2. 동작원리 - Router Link는 Router View와 함께 사용된다. - index.js에 할당된 라우팅 페이지들이 Router View에서 출력된다. - 그리고 Router Link를 사용하여 특정 Vue 페이지를 URL에 할당하는 것이다. - 예제코드를 직접 보면서 이야기 하자. [파일경로] [Header.vue] {{ nav.name }} [App.vue] [index.js] import {createRouter, createWebHashHistory} fro.. 2021. 6. 1. 30. Vue - 라우터(Router, Routing) 1. 설치 https://next.router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. next.router.vuejs.org a) Vue Router를 개발 의존성( -D) 으로 설치하지 않는이유.. 2021. 5. 31. 이전 1 다음
