Vue Router 사용을 위한 최소 구현

Vue Router를 우선 도입해, 최소한의 움직임을 볼 때까지의 순서 메모입니다.

Vue Router는 간단하게 사용할 수있어 매우 편리하지만,
사실은 더 복잡한 설정도 할 수 있는 깊은 플러그인인 것 같습니다.

Vue Router란?

Vue.js의 공식 플러그인

SPA를 구축하기위한 라우팅 라이브러리

클라이언트의 이력 관리를 포함한 페이지 천이(=라우팅 관리)나 데이터 취득·묘화의 기능을 담당해 줍니다.
(무슨 말인지 잘 모르겠어요)

Vue Router 소개

기존 프로젝트에 설치합니다.

npm install vue-router

※ 신규 프로젝트의 경우, vue create시에 vue-router도 아울러 도입할 수 있는 것 같습니다.

Vue Router 설정

src 폴더 아래에 "router.js"라는 새로운 JS 파일을 만들고 Vue Router 설정을 작성합니다.
main.js에 써도 문제 없습니다만, 가능한 한 희미하게 해 둡니다.

router.js

//import
import Vue from 'vue';
import router from 'vue-router';

//1.component読み込み
import top from "./components/top"
import end from "./components/end"

//vue-routerをインストール
Vue.use(router);

//2.routerの設定とインスタンス生成
export default new router({
  routes:[
    {
      path: "/", //トップページ
      component:top
      },

      {
      path: "/end", //終点ページ
      component:end
      }  
  ]
});

1.component 로딩

router로 표시를 제어하고 싶은 컴포넌트를 import해 둡니다.
참고로 top과 end의 내용은 이런 느낌입니다.

top.vue

<template>
  <div id="app">
    トップ
  </div>
</template>

end.vue

<template>
  <div id="app">
    終点
  </div>
</template>

2.router 설정 및 인스턴스 생성

그 밖에도 다양한 설정이 가능합니다만, 이번은 routes만 설정합니다.
여기에서 URL과 구성요소의 조합을 정의할 수 있습니다.

이 예제에서는 URL이
"~xxx/"일 때 top 컴포넌트가 그려지고,
"~xxx/end"일 때는 end 컴퍼넌트가 draw 됩니다.

main.js에서 로드

위에서 만든 router.js를 main.js에서 로드합니다.

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 설정이 완료되었습니다.

상위 구성 요소 측 설정

그리고는 이것을 받기 위한 요소를 부모 컴퍼넌트측에서 준비합니다.

이번에는 「App.vue」의 특정 부분에 top 컴퍼넌트와 end 컴퍼넌트를 나누고 싶기 때문에,
App.vue 안에 router-view 요소를 써 둡니다.

아래의 <router-view></router-view> 부분에는 routes로 설정한 구성 요소가 그려집니다.

App.vue

<template>
  <div id="app">

    <router-link to="/">トップページ</router-link><br>
    <router-link to="/end">終点ページ</router-link>
    <!--↑Routerのリンク（ページ遷移）を定義-->

    <router-view></router-view>
    <!--↑ここにRouterで設定したコンポーネントが描画される -->

  </div>
</template>

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