[Vue.js] Routing 정리(1)-사용법

쿠파주니어·2021년 9월 28일

routing vue.js

vue

목록 보기

2/3

Routing이란? 필요한 이유는?

URL을 바꾸고 다른 항목을 로드하게 도와주는 routing. vue.js는 SPA를 만들기 때문에 URL과 상호작용 하려면 routing을 사용해야 한다. (확실치 않음)

Routing Setting

(1) vue-router 패키지 설치

vue cli로 설치한 프로젝트에 vue-router 패키지 설치.

[프로젝트 위치에서 terminal을 열고 아래 명령어 입력]
npm install --save vue-router

[최신 버전 설치]
npm install --save vue-router@next

(2) 프로젝트 다시 실행

npm run serve

(3) 라우터 사용

이제 프로젝트에 라우터를 등록할 수 있다.

라우터 등록하는 예제를 쉽게 이해하기 위해 프로젝트 예시로 설명.

프로젝트 예시
중학교 또는 고등학교를 선택하면 URL이 변경되고, 중학교를 선택했을 때는 중학생 리스트를, 고등학교를 선택했을 때는 고등학생 리스트를 보여준다.
- https://서비스주소.../middleschool: 중학생 리스트
- https://서비스주소.../highschool: 고등학생 리스트

main.js

router 생성, route 등록, app에 router 사용 등록.

import { createApp } from 'vue';
//vue-router 패키지에서 createRouter, createWebHistory 함수를 import한다.
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
//router로 이동했을 때 띄울 컴포넌트를 import한다.
import MiddleSchool from './components/MiddleSchool.vue';	//중학생 리스트
import HighSchool from './components/HighSchool.vue';	//고등학생 리스트

//router를 만들고, 어떤 URL을 사용할 것인지, 각 URL에 어떤 component를 띄울건지 알려준다.
//history: routing 히스토리를 어떻게 관리할지 router에게 알려주는 것이다.
//createWebHistory: 브라우저가 사용하는 거 그대로 쓰라는 옵션.

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/middleschool', component: MiddleSchool },
    { path: '/highschool', component: HighSchool }
  ]
});

const app = createApp(App);

//vue app이 router를 사용하도록 한다.
app.use(router);

app.mount('#app');

App.vue

component가 나타날 자리 알려준다.

<template>
  <the-navigation></the-navigation>
  <main>
    <!-- router-view 태그를 사용한 곳에 component가 나타난다. -->
    <router-view></router-view>
  </main>
</template>

TheNavigation.vue

탭에 URL 링크를 연결한다.

<template>
  <header>
    <nav>
      <ul>
        <li>
          <router-link to="/middleschool">중학교</router-link>
        </li>
        <li>
          <router-link to="/highschool">고등학교</router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>