[Vue.js]2.vue-router 사용하기

이번 글에서는 vue-router를 통해 라우팅기능을 구현해보겠습니다.

 

vue-router설치

먼저, vue-router를 설치해야합니다.

npm i vue-router --save

 

설치 후 App.vue 파일의 template 부분에 router-view 부분을 추가해주세요

이 부분이 path에 의해 바뀌는 view가 보여질 위치입니다.

 

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>export default {
  name: "App",
};
</script>

---

이제 여기에 보여질 view페이지를 추가해줘야겠죠??

src폴더 안에 views라는 폴더를 만든 뒤,

그 안에 Home.vue, About.vue 파일을 만들어보겠습니다.

 

Home.vue

<template>
  <div>
    <h1>Welcome!</h1>
  </div>
</template>
<script>
export default {};
</script>

About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>
<script>
export default {};
</script>

 

vue 파일은 기본적으로 html에 해당하는 template 부분과, script 부분으로 이루어진 구조를 가집니다.

template 부분안에 원하는 html 코드를 작성해주었습니다.

---

이제 src폴더 안에 router.js파일을 생성해주세요

 

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});
export default router;

하나씩 살펴보겠습니다.

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";

vue는 기본적으로 import 되어야하고,

vue-router 사용을 위해 vue-router를 import 해주고,

사용할 페이지인 Home, About 파일을 각각 import 해줍니다.

 

Vue.use(VueRouter);

vue-router 를 사용하겠다는 선언입니다.

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

path에 따라 보여줄 component를 지정해줍니다.

export default router;

router를 export합니다. 다른 파일에서 router를 import하여 사용할 수 있게됩니다.

---

하지만 아직 router가 동작하지는 않는데요, 

main.js에 router를 추가해주어야 합니다.

 

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

router를 import 해주고,

new Vue에서 router를 추가해줍니다.

---

이제 npm run serve를 통해 작동시키면

 

path가 "/"일 때는 Home.vue가 보여지고,

path가 "/about"일 때는 About.vue가 보여집니다.

 

Home

About

다음번에는 vue에서 bootstrap을 적용하는 방법에 대해 포스팅하겠습니다!

감사합니다.