node.js 를 이용한 웹 앱 구현 - 백엔드 구축 (2), 라우터 설정 /router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import ProductList from '../views/ProductList.vue'

import ProductDetail from '../views/ProductDetail.vue'

import ProductCreate from '../views/ProductCreate.vue'

const routes = [

  {

    path: '/',

    name: 'home',

    component: ProductList

  },

  {

    path: '/create',

    name: 'Create',

    component: ProductCreate

  },

  {

    path: '/detail',  // 또는 '/ProductDetail'로 수정 가능

    name: 'ProductDetail',

    component: ProductDetail

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

 

 

• createRouter: Vue Router의 createRouter 함수를 사용하여 라우터 인스턴스를 생성합니다.
• createWebHistory: 브라우저 히스토리를 사용하는 라우터를 생성합니다. createWebHistory 함수는 HTML5 History API를 기반으로 브라우저 히스토리를 다룹니다.
• routes: 라우터의 경로와 컴포넌트를 정의하는 배열입니다. ProductList, ProductCreate, ProductDetail 컴포넌트를 각각 /, /create, /detail 경로에 매핑하고 있습니다.