네발로 코딩하는 포메라니안

1. 중첩된 라우터란? 라우터가 Component들을 전환하는 구간 안에, 또 라우터가 전환하는 구간이 있는 구조를 말한다. 아래 그림에서 Router1에서는 Main화면, Board화면을 바꿔주며, Router2에서는 Board안의 List, Detail 등으로 Component를 전환시켜준다. 2. 중첩된 라우터 구현 1. 파일 구성 *app.js = html에서 script코드를 분리한 것으로, router설정이 있음 2. Components 코드 1) test.html 더보기 HOME | 게시판 2) Main.js : 홈 화면 더보기 export default { template:`메인 페이지`, } 3) Board.js 더보기 export default { template: ` 게시판 페이지 `..

이전글 2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초 [Vue] 10. Vue Router 기초 1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을.. yerinpy73.tistory.com 이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다. 하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다. 각 Component마다 하나의 파일로 분리해서 작성해보자. 1..

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..