Vue Router

Vue 도 React와 마찬가지로 SPA 제작이 가능한 프레임워크이기 때문에,
Router를 사용해 새로고침 없이 컴포넌트를 갈아줄 수 있다.

How to use

먼저 npm install vue-router를 통해 node_modules 설치를 진행하거나, 나처럼 vue-cli 를 통해 vue App을 제작한 경우, vue add router를 통해 vue router 설치를 진행해준다.

그 뒤로는 조금씩 방향이 다르겠지만, 나의 경우 /router 폴더를 생성하고 내부에 index.js 파일을 만들어 그 안에서 라우터를 관리했다.

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../pages/Main/Main.vue";
import MyPage from "../pages/MyPage/MyPage.vue";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Main,
    },
    {
      path: "/mypage",
      component: MyPage,
    },
  ],
});

Router 컴포넌트를 만드는 방식은 React 와 크게 다를게 없었다.
Vue, VueRouter와 내가 사용할 컴포넌트를 import 한 뒤, Vue에게 VueRouter를 사용할 것임을 명시해준다.

그 뒤 routes Array 안에 Object 형태로 path와 그 path에 알맞게 보여줄 컴포넌트를 명시해준다.

mode: "history"는 라우터의 기본 모드인 hash mode를 해제해주기 위해 작성했다.
history모드에서는 history.pushState를 사용해 페이지를 리로드 하지 않고도 URL 탐색이 가능해진다.

오늘은 헤더에 Router를 적용시키는 것 까지 해보았다.
내일은 Router의 path, params 등을 가져와 페이지에 적용시켜보는 연습을 해봐야지 :)

잊지말고 추가작성! App.vue

Vue Router를 설정하고, 열심히 url을 바꿔보는데도 아무것도 나오지 않았다.
왜지!! 왜 아무것도 안 나오지!!!
열심히 서치해본 결과, 기준이 되는 App.vue에 추가 태그 작성이 필요했다.

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

<script>
import Header from "./components/Header.vue";

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

내가 추가 작성해준 태그는 <router-view></router-view> 부분이다.
저 router-view 태그 내부에 내가 router/index.js에서 작성해준 컴포넌트가 url에 맞게 배치되게 된다.
잊지말고 꼭! 추가 작성하자.

참고로 Header 컴포넌트의 경우, 현재 진행 상황에서는
어떤 페이지에서라도 나와야하는 컴포넌트이기 때문에 app 컴포넌트에 고정으로 작성해줬다.
(혼자 공부하는거라.. 이게 맞는 방식인지는 잘 모르겠다. 틀린게 있다면 피드백 부탁드릴게요.)

TMI

Vue 공부와 Php 공부, laravel 공부까지 병행한다는건 생각보다 쉽지 않은 일인 것 같다.
여기에 리액트 네이티브까지 합세하면 더더욱 정신이 없겠지.
그래도 즐겁다.
할 일이 계속해서 있다는 것도 즐겁지만, 내가 나아갈 방향이 많고 배울 수 있는게 많다는게 가장 큰 즐거움인 것 같다.
배울 수 있는 것이 많은 곳, 내가 멈춰서있지 않을 수 밖에 없게 되는 곳.
그런 곳에 가서 많은 시간을 보내고싶다. :)