20230914 _[74일차]_01. Vue로 게시판 만들기

cmd에서 새로운 프로젝트 sep14 생성해준다.

실행은 vs code 터미널에서 해주고

src - router 폴더 생성 - index.js 파일 만들어준다.

위처럼 router 폴더가 components 내부에 있어서 오류가 났었다 src로 다시 옮겨주니 해결

 

* 서로 다른페이지(서로 다른 vue 파일)로 이동하는 기능을 router폴더의 js파일에 만들어줄 예정

 

pdf참고해서 각각의 페이지 채워줬다.

최종구성은 아래처럼

 

index.js 에 보면

vue-router를 

/* 실제로 라우팅을 해주는 파일. 이곳에서 각 파일로 연결시켜 줍니다. */

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

import indexPage from "@/views/IndexPage.vue";

import boardList from "@/views/BoardList.vue";

import mainPage from "@/views/MainPage.vue";

import loginPage from "@/views/LoginPage.vue";

import joinPage from "@/views/JoinPage.vue";

const routes = [

  { path: "/", name: "index", component: indexPage },

  { path: "/join", name: "join", component: joinPage },

  { path: "/boardList", name: "boardList", component: boardList },

  { path: "/main", name: "main", component: mainPage },

  { path: "/login", name: "login", component: loginPage },

];

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes,

});

export default router;

routes 살펴보면 / 요청에 대해서 indexPage를 사용하겠다는 의미다.

export default router;  => 이름을 router로 내보내준거다.

App.vue의 template부분에서

MenuPage를 불러온다. 이때 router-view도 함께 불러와야 한다.

여기까지 하면 에러가 나는데

npm install --save vue-router 실행하면

index페이지

 

boardList 페이지

 

게시판 하나더 만들어보자

메뉴바에 게시판2 추가해주고

경로설정해준다.