IT 공부/Vue

detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vue 기존 Read 컴포넌트에서 onClick 이벤트를 이용해서 detail 컴포넌트로 이동하는 함수를 실행시킨다. detail(i){ this.$router.push({ //params를 넘겨줄때에는 push할때 path보단 name을 사용 name: 'Detail', params: { contentId: i } }) } route.js import Detail from "./components/Detail"; const router = new VueRouter({ mode: "history", routes: [ { path: "/detail/:contentId", name: "Detail", component: Det..

데이터 준비 data/index.js export default [ { writer: '카리나', title: '에스파', content: '존예' }, { writer: '윈터', title: '에스파', content: '졸귀' } ] 원래는 DB에서 데이터를 받아와야하지만, 간단하게 데이터를 만들어놓고 import하는 방식으로 구현 READ components/Read.vue {{ value.writer }} {{ value.title }} {{ value.content }} script에서 import를 통해, data/index.js파일의 데이터를 가져오는 것을 볼 수 있다. 받아온 데이터를 변수로 지정해서 template에서 v-for을 이용해 테이블로 나열 router.js import Re..