02. 페이지 라우팅

Vue를 공부하면서 페이지 안에 내용을 정리하기 위해 SPA 특성을 살리기 위해서 라우팅을 먼저 공부했다.

Vue공식 문서의 흐름과는 다르지만 아무생각 없이 a 태그를 사용해서 다른 vue 파일을 렌더링 하려고 했는데 되질 않아서 라우팅 먼저 공부를 시작하게 됐다.

 

기본적인 순서는 다음과 같다.

1. vue에서 페이지 라우팅을 하기 위해서는 vue-router를 설치해야한다.

npm install vue-router

 

2. vue-router 모듈을 설치한 후 router를 설치하는 js파일을 생성 (src폴더 내부에 router 폴더 생성 후 index.js 파일 생성)

import { createRouter, createWebHistory } from 'vue-router';
import TemplateOption from '@/pages/OptionAPI/TemplateOption.vue';
import About from '@/pages/About.vue';

const routes = [
  {
    path: '/TemplateOption',
    name: 'TemplateOption',
    component: TemplateOption
  }
];

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

export default router;

 routes 변수에 path(라우팅 할 url 경로), name, import할 컴포넌트를 정의해준다.

그 후에 createRouter를 통해서 라우터를 정의해준 후 export한다.

 

3. src 폴더 내부의 main.js에 router import

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

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

 기존에 생성된 App이라는 vue파일에 app.use를 사용해서 router폴더 내의 index.js에서 정의한 router를 사용한다고 선언

 

4. App.vue

<template>
  
  <div>
  
    <span>OptionAPI</span>
     
  </div>
  <div>
    <div>CompostionAPI</div>
    <ul>
      <li><router-link to="/TemplateOption">라우팅 테스트</router-link></li>
    </ul>
    
    <router-view /> <!--router-view 태그 안에 router-link 내용 렌더링 -->
  </div>

</template>

<script setup>

</script>

router-link 태그의 to 속성에 router/index.js에 정의했던 path를 입력, router-view에서 작성한 vue 파일이 렌더링 되게 된다

 

결과

메인화면

라우팅 테스트 클릭

라우팅 테스트라는 router-link라는 태그는 렌더링 시 a태그로 변환되서 나타나며 클릭하면 밑에 라우팅 테스트 페이지라는 내용이 나타나고 url 또한 정의했던 (path)처럼 나오는 것을 확인해볼 수 있다.