Vue3] Router 만들기

학습 주제

- router을 생성한다.

 

Router 생성 방법

1. 터미널에서 라우터 설치 (최초 1회)

npm install vue-router@4

 

2. main.js 안에 router을 넣는다.

// main.js

import { createApp } from "vue";
// import { createPinia } from "pinia";
import App from "./App.vue";
// import '@/assets/css/main.css'
// import "@/assets/css/fonts.css"; // font
// import "@/assets/css/colors.css"; // color
import router from "./router"; // router
// import "bootstrap/dist/css/bootstrap.css"; // bootstrap
// import "@/assets/css/theme.css";
createApp(App).use(createPinia()).use(router).mount("#app");

 

3. 라우터로 연결할 vue 페이지 생성

src 아래에 views 디렉토리를 만들고 그 안에 vue 페이지들을 만드는 것을 권장

 

4. 라우터 만들기

- router 폴더를 만들고 index.js 파일 생성

예시 전체 코드

// index.js
import { createRouter, createWebHistory } from 'vue-router';

// 1) vue 파일 가져오는 import 문 작성
import Home from '@/views/Home.vue';
import houseRoutes from './house';
import lottoRoutes from './lotto';
import registRoom from './registroom';
import addinfo from '../views/login_regist/AddInfo.vue';
import kakaoLogin from '../views/login_regist/KakaoLogin.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 2) 라우팅 경로 정의
  routes: [
    // 1안 ) 하나씩 라우팅 경로를 지정
    { path: '/', name: 'home', component: Home }, // 처음 들어올 때는 Home을 띄운다.
    { path: '/AddInfo', name:'addInfo', component: addinfo}, // AddInfo 페이지로 이동
    { path: '/kakaoLogin', name:'kakaoLogin', component: kakaoLogin}, // AddInfo 페이지로 이동
    // 2안 ) 여러개의 경로를 묶어서 경로 지정
    ...houseRoutes,
      ...lottoRoutes,
      ...registRoom,
    ],
  });

export default router;

 

- 1) vue 파일 가져오는 import 문 작성

참고 : 경로에 '@/views/Home.vue' 처럼 있다면, @은 src 를 의미한다. 즉, 'src/views/Home.vue' 와 같은 의미

// 1) vue 파일 가져오는 import 문 작성
import Home from '@/views/Home.vue';
import houseRoutes from './house'; // house.js 파일을 가져온다.
import lottoRoutes from './lotto'; // lotto.js 파일을 가져온다.
import registRoom from './registroom'; // registroom.js 파일을 가져온다.
import addinfo from '../views/login_regist/AddInfo.vue'; // AddInfo.vue 파일을 가져온다.
import kakaoLogin from '../views/login_regist/KakaoLogin.vue'; // KakaoLogin.vue 파일을 가져온다.

 

- 2) 라우팅 경로 정의 

1안 ) 하나씩 라우팅 경로를 지정

2안 ) 여러개의 경로를 묶어서 경로 지정

    // 1안 ) 하나씩 라우팅 경로를 지정
    { path: '/', name: 'home', component: Home }, // 처음 들어올 때는 Home을 띄운다.
    { path: '/AddInfo', name:'addInfo', component: addinfo}, // AddInfo 페이지로 이동
    { path: '/kakaoLogin', name:'kakaoLogin', component: kakaoLogin}, // AddInfo 페이지로 이동
    // 2안 ) 여러개의 경로를 묶어서 경로 지정
    ...houseRoutes, // house.js 코드를 수행
      ...lottoRoutes, // lotto.js 코드를 수행
      ...registRoom, // registRoom.js 코드를 수행

// house.js 파일

export default [
  {
    path: "/houses/maps/gosiwons",
    name: "houses/maps/gosiwons",
    component: () => import("../views/House.vue"),
  },
  {
    path: "/houses/maps/onerooms",
    name: "houses/maps/onerooms",
    component: () => import("../views/House.vue"),
  },
  {
    path: '/houses/maps/sharehouses',
    name: 'houses/maps/sharehouses',
    component: () => import('../views/mapPage/Sharehouse.vue'),
  },
  {
    path: '/houses/maps/room',
    name: 'houses/maps/room',
    component: () => import('../views/mapPage/RoomHouse.vue'),
  },

  {
    path: "/houses/sharehouses/:id",
    name: "DetailPage",
    component: () => import("../views/DetailPage.vue"),
  },

  {
    path: "/houses/sharehouses/reviews/:id",
    name: "ReviewPage",
    component: () => import("../views/Review.vue"),
  },
];