[vue] vue tutorial 뷰 튜토리얼 -5- (vue router 뷰 라우터를 사용하여 화면이동하기)

소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial)

목차

vue tutorial -1- (뷰 시작하기)

vue tutorial -2- (컴포넌트와 인스턴스)

vue tutorial -3- (앱바 만들기)

vue tutorial -4- (props 사용하기)

vue tutorial -5- (뷰 라우터 사용하기)

vue tutorial -6- (뷰티파이 테이블)

 

 

이번 게시글에서는 vue router를 사용하여 화면이동을 하는 방법에 대해 정리합니다.

 

프로젝트 구조

디렉토리 구조는 다음과 같습니다.

.
|-- App.vue
|-- assets 
|   |-- logo.png
|   `-- logo.svg
|-- components
|   |-- Create.vue
|   |-- Home.vue
|   |-- Table.vue
|   `-- core
|       |-- AppBar.vue
|       |-- Footer.vue
|       `-- View.vue
|-- main.js
|-- plugins
|   `-- vuetify.js
`-- router
    `-- index.js

 

 

1. router/index.js

router 디렉토리를 만들고 그 안에 index.js를 만들어 줍니다.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home'
import Create from '@/components/Create'
import Table from '@/components/Table'

Vue.use(Router); // vue 라우터 사용

export default new Router({
  mode: 'history', // history 모드를 사용할시 url에 #이 들어가지 않습니다.
  routes:[
    {
      path:'/'
      ,component:Home
    },
    {
      path:'/table'
      ,component:Table
    },
    {
      path:'/create'
      ,component:Create
    },
  ]
})

Reouter라는 객체를 export 시켜주는 자바스크립트 파일입니다.

'/' 라는 url이 오면 Home이라는 컴포넌트를

'/table' 라는 url이 오면 Table이라는 컴포넌트를 주기로 약속해줍니다.

 

2. main.js

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

Vue.config.productionTip = false

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

main.js에서는 방금 export한 router/index.js를 가져와서 Vue객체에 넣어줍니다.

 

3. core/View.vue

<template>
  <router-view />
</template>

<script>
export default {

}
</script>

<style>

</style>

1, 2번 작업이 완료되었다면 router-view라는 태그를 사용할 수 있습니다.

core/View.vue 파일에 router-view파일을 추가해줍니다.

이제 View.vue파일에 html은 router/index.js에서 설정한 url과 컴포넌트에 맞게 바뀌게 됩니다. 

 

4. Home.vue

<template>
  <p>THIS IS HOME</p>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js에서 사용하는 component를 만들어줍니다.

 

5. Table.vue

<template>
  <p>THIS IS TABLE</p>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js에서 사용하는 component를 만들어줍니다.

 

6. Create.vue

<template>
  <p>THIS IS CREATE</p>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js에서 사용하는 component를 만들어줍니다.

 

6. core/AppBar.vue

<template>
  <div>
    <v-app-bar
      dense
      dark
    >
      <ul class="menu">
        <li>
          <v-btn
          @click="toHome"
          >
          홈
          </v-btn>
        </li>
        <li>
          <v-btn
          @click="toCreatePage"
          >
          생성
          </v-btn>
        </li>
        <li>
          <v-btn
          @click="toTablePage"
          >
          목록
          </v-btn>
        </li>
      </ul>
    </v-app-bar>
  </div>
</template>

<script>
export default {

  methods: {
    toHome() {
      this.$router.push("/")
    },
    toCreatePage() {
      this.$router.push("/create")
    },
    toTablePage() {
      this.$router.push("/table")
    },
  }
}
</script>

<style>
  ul.menu li{ display: inline;}
</style>

6. 웹 브라우저로 확인하기

npm run serve 명령어로 프론트 서버를 띄우고

localhost:8080/

localhost:8080/page

를 입력하여 router가 정상적으로 동작하는것을 확인할 수 있습니다.

url에 맞게 view가 변경됩니다.