Vue) 15. vue-router4 설치 및 세팅, 사용까지..

설치 )

npm

• npm install vue-router@4

yarn

• yarn add vue-router@4

설정 )

우선 아무곳이나 router.js 파일을 만들고 아래와 같이 코드를 붙여넣어준다.

난 src폴더 안에다가 router.js를 만들었다.

문법은 중요하지 않다. vue-router를 만든사람이 이렇게 만들었을 뿐..

router.js

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

const routes = [
  {
    path: "ex) /list",
    component: ex) List,
  }
];

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

export default router;

main.js

import { createApp } from "vue";
import App from "./App.vue";

// vue-router4
import router from "./router";

createApp(App).use(router).mount("#app");
// 기존의 부분 => createApp(App).mount("#app");

사용법 )

라우팅 할 페이지를 추가할 때 마다, 이 부분만 건들여주면 끝이다!

router.js

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

import List from "./components/List.vue";
import Home from "./components/Home.vue";
import Detail from "./components/Detail.vue";

// 이 이부분만 추가해주면 끝!
const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list/detail",
    component: Detail,
  },
];

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

export default router;

위의 코드로 알 수 있듯이 컴포넌트를 만들어야, 결국에는 페이지 이동을 할 수 있다는 것을 알 수 있다!

App.vue (template)

router-view는 현재 라우터가 제공하는 컴포넌트가 랜더링된다.

해당하는 path에 맞게 컴포넌트가 랜더링된다고 생각하면 된다!

<template>
  <!-- 부트스트랩 연습 -->
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">VueLogProject</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="/list">List</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">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 라우터 뷰 (컴포넌트) -->
  <router-view :blogData="blogData"></router-view>
</template>

결과 )