[vue.js] router

페이지를 여러개 만들고 싶을 떄 router 를 사용한다.
example.com/list -> list.vue
example.com/detail -> detail.vue
이런 코드를 짤 수 있게 도와준다.

라우터 셋팅 방법

npm install vue-router@4

라우터 파일 만들기
router.js 파일 만들기 -> main.js에 등록 -> 컴포넌트를 어디에 보여줄지 정해야함.

1) router.js 파일 만들기
-> router 만든 사람이 아래와 같이 형식을 지정함, 내가 건드는 것은 path와 component만 바꾸면 됨.

import { createWebHistory, createRouter } from "vue-router"; -> 라이브러리에서 제공하는 함수 사용

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

const router = createRouter({ 
  history: createWebHistory(),
  routes,
});

export default router; 

2) main.js 등록
-> export 한 router 를 main.js에 import 시킨 후 등록하면 끝

3) 보여줄 곳을 router-view 로 표시
-> 어떤 사람이 example.com/list 로 접속하면 그 자리에서 list.vue를 보여줌
-> props 를 줄 때 평소처럼 주면 됨, :데이터작명='데이터이름'

페이지 이동 링크를 만들고 싶을 때 router-link 사용(a 태그와 비슷)

to="경로"임