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 전달 가능