Vue 라우팅

Basic

npm install vue-router@4

우선 라이브러리를 설치하고 시작합니다.

DummyData.js

export default [
  {
    title: "첫 째 프로젝트 : 허위매물 전문 부동산 앱",
    content: "Vue를 이용하면 비누같이 매끈한 앱을 만들 수 있습니다",
    date: "September 24, 2021",
    number: 0,
  },
  {
    title: "둘 째 프로젝트 : 오마카세 배달 앱",
    content: "음식이 아니라 셰프를 직접 배달해드립니다",
    date: "October 20, 2020",
    number: 1,
  },
  {
    title: "셋 째 프로젝트 : 현피 앱",
    content:
      "거리를 설정하면 가장 가까운 파이터를 소개해드려요! 서로 싸워보세요",
    date: "April 24, 2019",
    number: 2,
  },
];

router.js

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

import BlogList from "./components/BlogList.vue"; // 1
import MainHome from "./components/MainHome.vue";

const routes = [
  // 2
  {
    path: "/home",
    component: MainHome,
  },
  {
    path: "/bloglist",
    component: BlogList,
  },
];

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

export default router;

다음과 같이 작성하고 main.js에 연결해 주면 됩니다. 언급 이외의 것은 공식 문서에서 제공하는 형식이기에 참고만 하면 됩니다.

라우팅으로 연결할 컴포넌트 뷰를 임포트해옵니다.
그 임포트 한 컴포넌트를 경로와 같이 연결하면 됩니다.

main.js

import { createApp } from 'vue'
import App from './App.vue'

import router from './router.js' // 1

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

만든 router.js를 임포트해옵니다.
그리고 그걸 use 메서드에 연결해 줍니다.

App.vue

<template>
  <!--2-->
  <router-link to="/BlogList">리스트</router-link>
  <router-link to="/MainHome">홈</router-link>
  <!--1-->
  <router-view :blogData="blogData" />
</template>

router-view 태그를 통해 router에 연결된 모든 컴포넌트를 패스에 연결하고 생성합니다.
a 태그와 비슷한 기능을 하는 router-link 태그로 패스를 연결해 이동할 수 있습니다.

URL Parameter

router.js

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

import BlogList from "./components/BlogList.vue";
import BlogDetail from "./components/BlogDetail.vue";

const routes = [
  {
    path: "/blogdetail/:id", // 여기
    component: BlogDetail,
  },
  {
    path: "/bloglist",
    component: BlogList,
  },
];

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

export default router;

다음과 같이 파라미터를 id로 설정해 줍니다. (id는 자유롭게 작명한 것입니다.)

BlogDetail.vue

<template>
  <div>
    <h4>{{ blogData[$route.params.id].title }}</h4> // 여기
    <h5>{{ blogData[$route.params.id].date }}</h5>
    <p>{{ blogData[$route.params.id].content }}</p>
  </div>
</template>

<script>
export default {
    name: "BlogDetail",
    props: {
        blogData: Array
    }

}
</script>

다음과 같이 작명한 파라미터와 연결하여 파라미터마다 다른 값을 보여줄 수 있습니다.

Nested routes

router.js

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

import BlogList from "./components/BlogList.vue";
import BlogDetail from "./components/BlogDetail.vue";
import BlogComment from "./components/BlogComment.vue";

const routes = [
  {
    path: "/blogdetail/:id",
    component: BlogDetail,
    // 여기
    children: [
      {
        path: "comment",
        component: BlogComment,
      },
    ],
  },
  {
    path: "/bloglist",
    component: BlogList,
  },
];

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

export default router;

다음과 같이 작성하여 페이지를 또 나눌 수 있습니다. ( /blogdetail/1/comment)

push & go

BlogList.vue

<template>
  <div v-for="item in blogData" :key="item.number">
    <button @click="$router.go(-1)">뒤로 가기</button> <!--2-->
    <button @click="$router.go(1)">앞으로 가기</button>
    <h4 @click="$router.push(`blogdetail/${item.number}`)">{{ item.title }}</h4> <!--1-->
    <p>{{ item.date }}</p>
    <div>{{ item.content }}</div>
  </div>
</template>