Router3 Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기 메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라 컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자. Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기 src/api/index.js 일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자. import axios from "axios"; function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다. const BASE_URL = `http://________/menu/${menuid}`; return axios.get(BASE_URL); } export { showMenuDetailApi }; src/router/index.js 통신.. 2021. 8. 24. React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자. 스포일러 Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다. (Day2 를 누르면 day/2 로 변할 것이다.) React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 라우터 설치하기 터미널에 아래 명령어로 리액트 라우터를 설치하기 npm install react-router-dom 컴포넌트 구조 - component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다. - db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 ) - App.js 는 최상위 컴포넌트이다. App.js 여기.. 2021. 8. 17. Vue(9) Router 설치하기 (여러 페이지로 분리) Vue 에서 하나의 웹 페이지 안에 여러 페이지를 클릭해서 내용을 보려고 한다. Router 를 사용해서 원하는 페이지로 가보자 스포일러 로그인을 누르면 log in 이 나오고, 회원가입을 누르면 sign up 이 나온다. 덩달아 url 도 변경된다. 그럼 시작해보자 출발 1. 터미널에 다음 명령어를 사용하여 라우터를 설치해준다. npm install vue-router 2. 라우터가 들어갈 장소를 만들어 줘야한다. - routes 폴더를 만들고 그 안에 index.js 파일을 만들어준다. 3. 페이지(컴포넌트)들을 만들어 주자. - view 폴더를 만들고 그안에 LoginPage.vue 와 SignupPage.vue 를 만들어준다. 4. routes/index.js 라우터에 컴포넌트들을 넣어주자. - .. 2021. 7. 29. 이전 1 다음 반응형
