[Vue/코딩애플/part2] 3. vue-router 설치 / 기본 라우팅 실습

📌 vue-router 설치 / 라우팅 실습

1. vue-router4 버전 설치

npm run serve 가 실행 중이라면 터미널을 종료 시키고 새로운 터미널을 연다.

터미널에 다음을 입력한다.

 

npm install vue-router@4

 

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 로 접속해도 내용이 보이지 않는다.

List.vue 의 내용이 보이지 않음

 

 

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 로 페이지 이동이 된다.