[Vue] Router 설치 및 초기설정

Vue.js 프로젝트 생성

터미널 / cmd에서 해당 프로젝트 디렉터리까지 이동 후 router 설치 명령

> npm install vue-router

 

Vs Code에 src 디렉토리 내에 router.js 파일을 생성, 기본적인 Vue Router 설정

// src/router.js

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

import indexPage from "@/views/IndexPage.vue"
import boardList from "@/views/BoardList.vue"

const routes = [
    {path: '/', name:'index', component: indexPage},
    {path: '/boardList', name:'boardList', component: boardList},
];

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

export default router;

 

 

createRouter: Vue Router 인스턴스를 생성하는 함수

createWebHistory: HTML5 History 모드를 사용하여 브라우저의 주소 히스토리를 활용할 수 있도록 하는 함수

 

---

import 를 사용해  뷰 컴포넌트를 가져온다.

import indexPage from "@/views/IndexPage.vue"
import boardList from "@/views/BoardList.vue"

---

routes 배열을 정의 (라우터에 등록할 경로와 컴포넌트를 정의하는 곳)

const routes = [
    {path: '/', name:'index', component: indexPage},
    {path: '/boardList', name:'boardList', component: boardList}
]

path: 라우터 경로.

name: 라우터의 이름, 나중에 프로그래밍 방식으로 라우팅할 때 유용

component: 해당 경로로 이동할 때 표시할 Vue 컴포넌트.

---

createRouter 함수를 사용하여 Vue Router 인스턴스 생성

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

history: 라우터의 히스토리 모드를 설정

createWebHistory() :  HTML5 History 모드를 사용하도록 설정, 다른 모드도 사용 가능.

---

router 인스턴스를 내보냄

export default router;

---

=> main.js 에서 app.use(router)를 통해 라우터를 적용하면 다른 곳에서도 라우팅 사용가능

---

[ 초기 main.js ]

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

createApp(App).mount('#app')

router 사용을 위해 아래처럼 적용시켜준다.

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

const app = createApp(App);
app.use(router);
app.mount('#app');

// 간결하게 아래처럼 가능
// const app = createApp(App);
// app.use(router).mount('#app');

---

[ 렌더링(Rendering) ] _화면에 UI를 생성하고 업데이트하는 프로세스

데이터와 템플릿(또는 컴포넌트)을 결합하여 최종 사용자가 볼 수 있는 HTML, CSS 및 JavaScript를 생성하는 과정.

Vue.js에서 렌더링은 Vue 인스턴스 또는 컴포넌트의 데이터와 템플릿을 가지고 실제 화면에 컴포넌트를 그리는 작업을 의미.

렌더링은 초기 화면 로드 시에 발생하며, 데이터 변경 또는 상태 업데이트가 있을 때 다시 실행.

 

[ 마운트(Mount) ] 

마운트는 Vue 애플리케이션 또는 컴포넌트를 실제 DOM에 연결하고 렌더링된 컨텐츠를 특정한 HTML 요소에 붙이는 과정
Vue 애플리케이션을 화면에 나타나게 하는 초기화 단계로, 일반적으로 애플리케이션이 시작될 때 한 번만 발생.

---

렌더링은 UI를 생성하고 업데이트하는 과정 자체를 나타내고,

마운트는 애플리케이션 또는 컴포넌트를 화면에 표시하는 초기 설정 단계를 나타냄.

 

마운트가 완료되면 Vue.js는 데이터 변경을 감시하고, 데이터가 변경될 때마다 템플릿 렌더링을 다시 실행하여 화면을 업데이트한다. 이렇게 함으로써 사용자 인터페이스가 동적으로 변경되며, 데이터와 템플릿 간의 바인딩을 통해 화면이 반응적으로 동작

---

이제 각각의 Page들로 이동할 수 있도록 App.vue에서 설정해주면 되는데

 

이제 Vue 컴포넌트 내에서 라우팅을 사용할 수 있다.

<template>
  <div>
    <router-link to="/">index</router-link>
  </div>
  <div>
    <router-link to="/boardList">boardList</router-link>
  </div>
  <router-view></router-view>
</template>

router-link : 사용자가 클릭하면 해당 페이지로 넘어가게 해주는 링크 역할

router-view : 현재 화면에 표시되어야 할 컴포넌트를 렌더링하는 역할

 

즉, 사용자가 router-link를 통해 클릭하여 다른 페이지로 이동하면 해당 페이지의 컴포넌트가 router-view 내에서 표시.

 

기본 / 요청에 대해서는 아래처럼 IndexPage.vue 화면을 띄워주고

 /boardList 요청( boardList 링크 클릭하면)에 대해서는 아래처럼 BoardList.vue 화면을 띄워준다.

---

페이지가 많으니 메뉴바를 만들자.

components 폴더 MenuPage.vue 생성하고 여기에서 router 링크를 넣어준다.
App.vue 에서는 각각의 링크가 아닌 MenuPage만 불러와서  router-view로 띄워주면 된다.

 

[ MenuPage.vue ]

<template>
  <header>
    <nav>
      <ul>
        <li><router-link to="/">index</router-link></li>
        <li><router-link to="/boardList">게시판</router-link></li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  name: "MenuPage",
};
</script>

---

App.vue 에서 Menupage.vue 를 import 로 불러와서 router-view로 화면에 띄워준다.

<template>
  <menuPage></menuPage>
  <router-view></router-view>
</template>

<script>
import menuPage from "./components/MenuPage.vue";

export default {
  name: "App",
  components: {
    menuPage,
  },
};
</script>

---

MenuPage.vue 에서 메뉴바 스타일 지정까지 해주면

<style>
header {
  height: 50px;
}
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: black;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  list-style: none;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
nav li:hover {
  font-weight: bold;
}
a {
  text-decoration: none;
  color: orange;
}
.lir {
  float: right;
  width: 80px;
}
</style>

메뉴바 'index' 링크를 통해 기본 ' / ' 요청에 대한 index페이지로 이동가능.

메뉴바의 '게시판' 링크를 통해 ' /boardList ' 요청에 대한 boardList페이지로 이동가능.