vue router 설치와 설정

라우팅(routing)이란?

: 네트워크에서 사용되는 용어로 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정을 말한다

웹에서의 라우팅은 웹페이지간 이동을 뜻한다

예를 들어 브라우저의 url이나 링크를 클릭하면 해당 페이지로 이동되는 것이 라우팅이다

 

vue router

: vue.js의 공식 라우터이다

vue.js를 사용한 SPA를 쉽게 만들 수 있도록 vue.js의 코어와 긴밀히 통합되어 있다

화면간 이동시 깜빡거림 없이 매끄럽게 전환할 수 있다

📌 vue router의 기능
- 중첩된 라우트/뷰 매핑
- 모듈화된 컴포넌트 기반의 라우터 설정
- 라우터 파라미터, 쿼리, 와일드카드
- vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
- 세밀한 네비게이션 컨트롤
- active CSS 클래스를 자동으로 추가해주는 링크
- HTML5 히스토리 모드 또는 해시 모드
- 사용자 정의 가능한 스크롤 동작

 

 

vue router 설치 방법

방법에는 npm install로 설치하는 방법도 있고, vue add를 사용해 plugin으로 설치하는 방법이 있다

vue add를 사용해서 설치하면 vue router샘플과 main.js등에 자동으로 사용처리를 해준다

다만 이렇게 설치하는 경우 app.js 와 main.js가 변경되면서 기존에 작업한 내용이 없어지기 때문에 프로젝트 초반에 설치를 하거나 기존 내용을 백업한 후 설치하는 것이 좋다

 

✦ npm install 활용해서 설치하는 법

(이 방법을 사용하는 경우 main.js와 router.js에 설정이 필요하다)

npm install --save vue router

router.js 셋팅 내용

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

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

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

export default router;

main.js 셋팅 내용

import router from './router'
//만약 router파일안에 router.js파일을 만들었다면 경로를 './router/router'이렇게 해줘야함
createApp(App).use(router).mount('#app')

 

✦ vue router plugin 설치방법

vue add router

설치 중간에 "Use history mode for router?"와 같은 메세지가 나오는데 "라우터에서 히스토리 모드를 사용하시겠습니까?"라는 메세지이기 때문에 "y"를 입력 후 진행하면 된다