[vuelog] router-view, router-link

• 페이지로 나누고 싶다면 컴포넌트부터 만들어야 함
• props 전송은 router-view에 하면 됨.

router 설치

터미널

npm install vue-router@4

router.js 생성

• 해당 양식 사용
• createWebHistory, createRouter 라이브러리 사용함
• component import → routes path, component 추가 및 수정

router.js

import { createWebHistory, createRouter } from 'vue-router';

//component import 
import TheList from './components/TheList.vue'

const routes = [
  {
    path: '/경로', //해당 경로 접속할 경우
    component: import 해온 컴포넌트, //해당 컴포넌트 보여줌
  }
];

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

export default router;

main.js에 넣기

import router from './router.js'

createApp(App).use(router).mount('#app')

router-view

• 보여주고 싶은 위치에 기입
• props는 기존과 같이 ex):blogDoc="blogDoc"
• blogDoc은 배열 안 객체이며 TheList에서 v-for로 뿌려줌

<router-view :blogDoc="blogDoc"></router-view>

router-link

• a태그와 동일
• to는 href

<router-link to="/list">리스트 페이지 이동</router-link>