[vue.js] 2. router

0. router?

클라이언트 요청에 따라 해당하는 컴포넌트를 불러와 입힐수 있다.

 

https://router.vuejs.org/installation.html

Installation | Vue Router

 

1. 설치

npm install vue-router@4

 

2. 적용

처음 vue-project를 생성하면

파일 디렉토리 구조는 아래와 같이 구성되어 있다.

vue-project 

 - src

  - assets

  - components

  - App.vue

  - main.js

 

2-1 템플릿으로 이용할 vue 페이지를 하나 만든다.

// src/view/router1.vue

<template>
  <div>
    router1
  </div>
</template>

<script>

export default {
  name: 'Router1',
};

</script>

 

 

2-2 src/router 폴더를 생성한 뒤, router.js를 만들자

그 후, 만든 router용 페이지를 등록한다.

// src/router/router.js
import {createWebHistory, createRouter} from 'vue-router';

import Router1 from '../view/router1.vue';

const routes = [
  {
    path: '/router1',
    name: 'Router1',
    component: Router1
  }
]

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

 

2-3 main.js에서 router를 등록한다.

// src/main.js

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

import {router} from './router/router.js'; // 라우터 추가

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

 2-4 App.vue에 router-link로 page이동을 하고

router-view로 그 페이지에 맞는 템플릿을 붙혀준다.

// src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">home</router-link> |
      <router-link to="/router1">router1</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

3. 페이지 이동 확인

localhost:8080/

localhost:8080/router1

아래와 같이 페이지이동을 하면 된다~

router 관련 api는 공식홈페이지에서 확인하면 된다 !

 

다음에는 template에서 사용가능한 vue 문법들 (v-if, v-for.. 등을 다뤄보겠다!)