[Vue] #14 - router

1. router 설치하기

npm install vue-router@4

2. router 폴더 생성

src/router.js 생성 후

import { createWebHistory, createRouter } from "vue-router"; // import 컴포넌트 const routes = [ { path : "/list", // 이 경로로 접속하면 component : List, // 이 컴포넌트로 넘어가게 해주세요 }, { path : "/home", component : Home, }, { path : "/detail/:id", //detail/:아무문자 component : Detail, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;

이런 형식으로 작성

3. router 사용하기

<router-view> <router-link>

ex

<router-link to="/list">리스트페이지</router-link> 리스트페이지 라는 글자를 누르면 /list페이지로 넘어간다 <router-view :blog="bloglist"></router-view> 하면 props 전달 가능