Vue(9) Router 설치하기 (여러 페이지로 분리)

Vue 에서 하나의 웹 페이지 안에 여러 페이지를 클릭해서 내용을 보려고 한다.

Router 를 사용해서 원하는 페이지로 가보자

 

스포일러

로그인을 누르면 log in 이 나오고, 회원가입을 누르면 sign up 이 나온다.

덩달아 url 도 변경된다. 그럼 시작해보자 

 

---

출발

1. 터미널에 다음 명령어를 사용하여 라우터를 설치해준다.

npm install vue-router

 

2. 라우터가 들어갈 장소를 만들어 줘야한다. 

- routes 폴더를 만들고 그 안에 index.js 파일을 만들어준다.

 

3. 페이지(컴포넌트)들을 만들어 주자. 

- view 폴더를 만들고 그안에 LoginPage.vue 와 SignupPage.vue 를 만들어준다.

 

4. routes/index.js 라우터에 컴포넌트들을 넣어주자.

- import 해주기 (라우터 기능이랑 페이지 컴포넌트들)

- export default 안에 라우트 안에 { 각각 페이지 정보 } 넣기

import Vue from 'vue';
import VueRouter from 'vue-router';
import LoginPage from '@/views/LoginPage.vue';
import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login',	    // url에 나오는 주소
      component: LoginPage, // 어떤 컴포넌트로 연결할 건지(위에 임포트한 컴포넌트들 중 하나)
    },
    {
      path: '/signup',
      component: SignupPage,
    },
  ],
});

 

5. LoginPage.vue / SignupPage.vue 근황은 어떨까?

- 테스트를 위해 vue 템플릿을 만들어줬다. 

 

6. 그럼 메인 화면(App.vue)으로 가서 위에서 만든 기능들을 화면으로 보여주자

App.vue 는 프로젝트 실행시 우리를 처음으로 맞이하는 very first 화면(최상단)이다.

<template>
  <div>
    <header>
      <router-link to="/login">로그인</router-link> |
      <router-link to="/signup">회원가입</router-link> // 메뉴를 띄워줌 
    </header>
    <router-view></router-view> 		      // 내용을 띄워줌
  </div>
</template>

<script>
export default {};
</script>

<style></style>

 

결과화면

url 도 잘 바뀌고, 내용도 잘 나온다 !