Vue Router 사용하기

Heina·2022년 8월 23일

router vue

Vue Router 사용하기

Vue Router를 사용하는 이유

URL 변경시 Dom을 새로 갱신하는 것이 아니라 변경된 영역만 갱신하기 때문에 유연한 페이지 전환이 가능하다!

라우터 생성 및 사용 방법

1. Vue-router를 설치한다

node npm install vue - router@4

2. router.js 생성하여 route 관리하기

1) vue-router를 import 하고, router를 변수 선언하여 작성한다.
2) 사용할 component 들을 import 시키고, routes에서 설정을 해준다.
- path는 주소로 사용, component 에는 해당 페이지 이름

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

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

export default router;

3. main.js 설정하기

우리는 router를 사용할 것 이기 때문에 .use(router) 꼭 작성!

// ** vue2 버전 **//

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

// ** vue3 버전 **//

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

createApp(App).use(router).mount('#app')

버전에 따라 설정하는 방법이 다르기 때문에 확인하고, 더 정확한건 vue-router 공식 홈페이지에서 확인할 수 있다.

4. app.vue에서 view 설정하기

<router-view></router-view> 를 사용하여 어디에나 배치하여 레이아웃에 맞게 조정할 수 있다.

<template>
  <div>
    <nav class="navbar bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="@/assets/1F92A.svg"
            alt=""
            width="30"
            height="24"
            class="d-inline-block align-text-top"
          />
          Vuelog
        </a>
        <router-link to="/">Home</router-link>
        <router-link to="/list">list</router-link>
      </div>
    </nav>
    <div class="mt-4">
     <router-view :listDatas="listDatas"></router-view>
    </div>
  </div>
</template>