Vue+Vuetify+Vue-Router 시작하기 - 2

여기부터 솔직히 잘 기억이 나지않아 Gym 코딩님의 유투브영상을 참고하면서 다시 복기하도록 한다.

잉여주제에 기억이 소거되는 시간도 빠른 메모리를 가진 나님은 역시 갓 구글님께서 인수하신 유투브의 컨텐츠들을 참고하여 많은 지식을 습득할 수 있었다. 하지만 기억이 소거되는 시간이 TLC 보다 빠른 나의 두뇌는 휘발성 메모리인지라 이것을 장기간 담아내기 어려워 이 블로그에 글을 썼음을 밝힌다.

현재 본인의 기술 블로그 겸 포트폴리오를 제작중에 있다. 그렇기 때문에 이 글에 나오는 모든 문서의 이름은 그것을 따라간다.

우선 router.js를 만들기전에 미리 컴포넌트 페이지를 만들어둔다.
프로젝트 생성 시 이미 만들어져있는 컴포넌트 폴더를 써도 되고 임의로 만들어도 되는데,
나는 짐코딩 님의 유투브 영상을 참고하여 했기 때문에 views 폴더에 사용하였다.

컴포넌트를 라우팅하려면 우선 준비물이 필요하다.
컴포넌트 할 뷰페이지, router.js, main.js

이것들을 준비했다면, 페이지를 표시할 app.vue에 가서 이녀석들을 어떻게 표시 해줄 건지 명시해줘야 웹에 표시되게 된다.

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '@/views/About'
import Board from '@/views/Board'
import Calender from '@/views/Calender'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'About',
        component: About,
    },
    {
        path: '/board',
        name: 'Board',
        component: Board,
    },
    {
        path: '/calender',
        name: 'Calender',
        component: Calender,
    },
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

번역 >
니가 VueRouter를 가져올 파일들의 루트를 알려줌. '@/폴더명/뷰파일명'
그리고 그 파일들이 쓸 루트는 path에 이름은 name 컴포넌트명도 써있으니까 참고해. 그리고 갖다쓸 new VueRouter의 모드는 히스토리고 니가 갖다쓸 주소 이름은 routes라는 메모지에 배열객체로 적혀있음. 참고하셈. 그리고 이 모든것은 router라고 부른다 알겟나?

해당 js 파일을 다 작성했다면 이제 이녀석을 vue에서 읽어올 수 있도록 main.js에 import 해줘야 한다.

main.js

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

Vue.config.productionTip = false

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

번역> main.js를 읽어볼 네녀석에게 알려준다. router는 루트가 ./router 서랍장에 있음. 그거 열어보면 된다.

main.js에 추가하는 건 꽤 간단한데, router가 뭔지 import 해주고, 밑에 new Vue에다가 router를 특정해줘야 나중에 로컬포트 실행 후 저장할때 에러메세지가 안뜬다. 저거 입력안해주면 눈 뜬 봉사됨

여기까지 끝났으면 이제 app.vue로 가보자.

App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/">About</router-link> |
      <router-link to="/board">Board</router-link> |
      <router-link to="/calender">Calender</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

템플릿 내부에 router-link 를 통해 내가 아까 정해놓은 루트에 접근할 수 있게끔 주소를 넌지시 알려준다. 그리고 그 주소를 통해 router-view가 다 보여준다.

내가 정해준 주소를 통해 미리 만들어준 컴포넌트 페이지를 정상적으로 보여주고 있다.
여기까지하면 라우트 설정이 제대로 되었는지 확인이 완료되었다.
이제 vue-router까지 설정이 완료되었으므로 나를 힘들게한 그녀 뷰티파이를 설치해보도록 하자.