[Vue]8.Vue Router

Vue Router

vue의 확장 프로그램
컴포넌트와 URL을 연결해주는 역활을 한다.
홈페이지

설치하기

npm install vue-router@4

사용하기

main.js파일에 설치한 router연결하기(router.js파일 만들기)
👉내용이 길어서 src->router.js파일을 따로 만들고 import로 연결해준다.

router.js 파일

// 1. 라이브러리 불러오기.
import { createWebHistory, createRouter } from "vue-router";
// 2. 컴포넌트 불러오기.
import 컴포넌트명 from "컴포넌트위치";

// 3. 경로를 정의하고, 각 경로를 컴포넌트와 매핑.
const routes = [
  {path: "/경로", component: import해온 컴포넌트명},
  {path: "/경로", component: import해온 컴포넌트명},
  ...
];

// 4. 위에 만든 `routes`변수를 전달해 라우터 인스턴스를 생성.
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router; 

main.js파일

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
// 라우터 파일 가져오기.
import router from './router.js'

// 앱이 라우터를 인식하도록, import한 라우터 파일을 `use()`로 등록하기.
// 1번 또는 2번으로 등록!

// 1번
const app = createApp(App)
app.use(router)
app.mount('#app')

// 2번
createApp(App).use(router).mount('#app')

이제 라우터를 사용할 수 있다!
🤫경로를 만들고 연결했는데 어떻게 보여주지...?
✔️ router-view / router-link 로 보여주고 연결해준다!

router-view / router-link

router-view

현재 경로 URL에 해당하는 컴포넌트를 표시
<router-view></router-view>

router-link

로드하지 않고도 URL 변경, 생성 및 인코딩할 수 있는 a태그 역활
<router-link :to="/경로">누르면 이동</router-link>

링크/List 를 입력하면 List 컴포넌트를 보여주고 링크/를 입력하면 Home 컴포넌트를 보여주게 만들어보자

1. router.js파일에 컴포넌트를 등록한다
   위에 쓸수록 우선권을 가진다!

//[ router.js 파일 ]
const routes = [
  {
    path: "/List",
    component: List
  },
  {
    path: "/",
    component: Home
  },
];

2. 원하는 곳에 <router-view></router-view> 를 추가
   HTML내부 아무곳에 저 태그를 추가하면 라우터로 구분된 페이지를 그 자리에 보여준다.
   +)props 전송은 옆에 :작명="props" 넣어주면 된다.

//[ App.vue 파일 ]
<template>
 <router-link to="/">홈페이지</router-link>
 <router-link to="/list">리스트페이지</router-link>
 <router-view :블로그글="블로그글"></router-view>
</template>