[Vue] Vue-router 설치 및 사용법

 

1. vue-router 란?

 

• vue에서 제공하는 라이브러리
• 페이지를 이동하는 기능을 구현할 때 사용
• 클라이언트가 요청하는 URL에 따라 컴포넌트를 동적으로 불러와 페이지를 띄워줌

 

 

 

2. 설치 및 사용법

 

1) vue-router 설치

 

npm install vue-router@next

 

먼저 위 명령어를 참고해 뷰 라우터를 설치해 준다.

 

 

 

package.json

 

package.json 파일의 dependencies에서 위 사진처럼 뷰 라우터 버전이 생성되었다면 설치가 완료된 것이다.

 

 

 

 

 

2) router 파일 생성

 

src 안에 파일을 생성한다. ( router.js )

 

router.js 폴더 안에 라우터의 내용 적고 export 한 다음에 mainjs에서 import해오면 된다. ( 찬찬히 따라오면 된다. )

 

 

 

하단의 코드는 라우터의 기본 코드이다.

 

import { createWebHistory, createRouter } from "vue-router";
//vue-router 라이브러리를 import 해와서 필요한 함수 사용

const routes = [
  {
    path: "/경로", 			// 사용자가 이 경로로 접속하면
    component: import해온 컴포넌트,	 // 이 컴포넌트를 보여줘
  }
];

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

export default router; // 내보내기

 

해당 코드를 방금 생성한 router.js 파일에 우선 붙여 넣으면 된다.

 

주석으로 간단하게 써두긴 했지만,  path와 component 부분을 수정하며 필요한 페이지를 만들어낼 수 있다.

 

 

 

 

 

 

3) main.js에 router 사용한다고 알리기

 

main.js

 

main.js 파일에 밑줄 친 부분을 위와 같이 추가해 준다.

 

 

 

 

 

 

4) App.vue

 

 

라우터로 설정할 컴포넌트를 어디 정도에 보여줄지 작성해줘야 한다.

 

<router-vue></router-vue>

 

 

 

 

5) router-link

 

우리가 웹페이지를 사용할 때 대부분 버튼을 눌러 이동하지, 하나하나 url을 작성하지는 않는다.

vue-router 라이브러리에서는 이런 기능을 하는 태그를 제공한다.

바로 router-link 이다.

 

<router-link to="경로"></router-link>

 

 

 

기본적으로 이렇게 진행되며, 간단한 예제를 보며 이해를 돕자 🤔

 

 

 

 

 

 

3. 예제

 

1) 컴포넌트 생성

 

우선 컴포넌트를 생성한다.

 

나는 음... Home 컴포넌트와 글 목록을 띄워주기 위해 List 컴포넌트를 생성하기로 했다.

 

 

 

Home.vue

 

<template>
  <div>
    <h5>메인 페이지</h5>
    <p> ~ Vue 새내기입니다 ~ </p>
  </div>
</template>

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

<style>
</style>

 

 

List.vue

 

<template>
  <div>
    <h5>첫번째 글</h5>
  </div>
  <div>
    <h5>두번째 글</h5>
  </div>
  <div>
    <h5>3번째 글</h5>
  </div>
</template>

<script>

export default {
    name:'List',
}
</script>

<style>
</style>

 

이렇게 간단하게 컴포넌트 2개를 생성했다.

 

 

 

 

 

2) router.js에 추가

 

import { createWebHistory, createRouter } from "vue-router";
import List from './components/List.vue';
import Home from './components/Home.vue';

const routes = [
  {
    path: "/list",
    component: List, 
    // import문으로 불러오지 않았을 경우 : 컴포넌트를 List.vue로 작성
  },
  {
    path: "/",
    component: Home,
  }
];

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

export default router;

 

이렇게 두 개의 컴포넌트를 import로 불러오고,

routes 안에 url에 따라 어느 페이지를 보여줄지 설정해 주었다.

 

 

 

 

 

 

3)  router-view 작성

 

페이지를 이동할 때 화면의 어느 위치에 보여줄지 알려줘야 하기 때문에 App.vue로 이동한다.

 

template 태그 안, 내비게이션 바 하단에 보일 수 있도록 

 

App.vue

 

요기 정도에 router-view 태그를 작성해 주었다.

 

 

 

 

Home 화면 ( / )

 

 

List 화면 ( /list )

 

 

이렇게 두 화면을 볼 수 있다.

 

( 상단에 조그맣게 보이는 URL 참고 )

 

 

 

 

 

 

 

4) router-link 활용

 

<router-link to="/">홈 페이지</router-link>
<router-link to="/list">리스트 페이지</router-link>

 

이렇게 두 줄의 코드를 앞서 작성한 <router-view> 태그 하단에 추가해 주었다.

 

 

 

 

 

결과 화면

 

 

그럼 이렇게 생성이 되고, 누르면 지정해 둔 경로로 페이지가 넘어간다.

 

 

약간 a태그? 하이퍼링크? 느낌이 나는 것도 같다.

 

 

css 등을 아무것도 설정을 안 해두니... 세상 하찮다  ㅋㅎㅎㅎㅎ