[Vue/코딩애플/part2] 3. vue-router 설치 / 기본 라우팅 실습
📌 vue-router 설치 / 라우팅 실습
1. vue-router4 버전 설치
npm run serve 가 실행 중이라면 터미널을 종료 시키고 새로운 터미널을 연다.
터미널에 다음을 입력한다.
npm install vue-router@4
설치 완료된 것을 확인하려면 package.json 을 확인하자
2. 라우터 파일을 만든다.
main.js 에서 라우터 설정을 해야 하는데 코드가 길어서 다른 파일에 만든 후 가져오는 것이 일반적이다.
src 파일 밑에 router.js 파일을 만든다.
router.js 안에는 아래 코드를 복붙한다.
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{
path: "/경로",
component: import해온 컴포넌트,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
import { createWebHistory, createRouter } from "vue-router";
에서 from "vue-router" 는 경로가 아닌데 뭘까?
라이브러리명을 적으면 라이브러리를 import 해서 쓴다는 뜻이다.
vue-router4 사용법 대로
createRouter() 안에 설정 막 집어넣으면 끝이다.
routes 에 넣을 코드가 길어서
const routes 로 따로 뺀 것
component: 영역에는 컴포넌트를 넣어주면 되는데, 코드 상단에 import 해 온 후 작성하면 된다.
/list 로 접속할 때 <List/> 를 보여주고 싶으면 아래와 같이 작성한다.
// List.vue 컴포넌트를 라우팅해보자
import { createWebHistory, createRouter } from "vue-router"; // vue-router 라이브러리를 import 한다
import List from "@/components/List.vue";
const routes = [
{
path: "/list",
component: List,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
다시 main.js 파일로 돌아와서
- router.js 를 import 해준 후 (import 작명 form router.js 파일 경로)
- createApp(App).use(작명).mount('#app') 로 작성해준다.
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 라우터만든거 from './router.js'
createApp(App).use(라우터만든거).mount('#app')
이해를 돕기위해 작명을 {라우터만든거} 로 해 주었다.
다시 이쁘게 작명해주자.
3. App.vue 에서 라우터를 뚫어주자 (어디에서 보여줄건지)
보여줄 곳에 <router-view></router-view> 로 표시하면 된다.
이제 <router-view> 로 표시한 곳에 라우터로 설정한 컴포넌트를 보여주게 된다.
<!-- 라우터로 설정한 컴포넌트를 보여줄 자리 -->
<router-view></router-view>
이제 List.vue 를 App.vue 에서 컴포넌트로 보여주지 않고
router 를 활용하여 보여줄 수 있다.
/list 로 접속하면 List.vue 를 보여주는 것이다.
<template>
<!-- nav -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 라우터로 설정한 컴포넌트를 보여줄 자리 -->
<router-view></router-view>
<div class="contaitner mt-4">
<h5>Vue 개발자의 블로그 입니다</h5>
<p> - Vue 로 만들었음 - </p>
</div>
<!--<List :list="blogList"/>-->
</template>
하지만 List.vue 에서는 blogList 데이터가 필요한데, 데이터를 props 해주지 않았기 때문에
/list 로 접속해도 내용이 보이지 않는다.
props 문법을 똑같이 적용하여 데이터를 자식 컴포넌트에 보내줄 수 있다.
<!-- 라우터로 설정한 컴포넌트를 보여줄 자리 -->
<router-view :list="blogList"></router-view>
List.vue 가 잘 노출됨을 확인할 수 있다.
같은 방법으로 다음 영역을 / 로 접속했을 시 노출되도록 라우팅 해주었다.
<div class="contaitner mt-4">
<h5>Vue 개발자의 블로그 입니다</h5>
<p> - Vue 로 만들었음 - </p>
</div>
import { createWebHistory, createRouter } from "vue-router"; // vue-router 라이브러리를 import 한다
import List from "@/components/List.vue";
import Home from "@/components/Home.vue";
const routes = [
{
path: "/",
component: Home
},
{
path: "/list",
component: List,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
이제 메인페이지로 접속하면 (/) 아래처럼 보이게 된다.
페이지로 나누고 싶으면
- 우선 컴포넌트를 만든다.
- router 에 추가한다. (path, componets 추가)
- props 전송은 <router-view> 에서 하면 된다.
📌 router-link / 다른 페이지 이동링크를 만들고 싶을 때
a 태그를 router-link 이용하여 만들 수 있다.
<router-link to="이동할 링크"></router-link>
<!-- 라우터로 설정한 컴포넌트를 보여줄 자리 -->
<router-view :list="blogList"></router-view>
<router-link to="/list">list 로 이동</router-link>
[list로 이동]을 클릭하면 /list 로 페이지 이동이 된다.