Vue.js - 라우터뷰(Router view)

저번 포스팅에 이어서 라우터 별로 App을 따로 만들어서 라우팅 view를 관리해보도록 한다.

https://meongj-devlog.tistory.com/174

[Vue.js] Vue-Router 설치 및 적용하기

 

---

 

componets 라는 폴더를 생성하여 index.js에 있던 component들을 만들었다.

 

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
import NotFound from '../components/NotFound.vue'


Vue.use(VueRouter)


const router = new VueRouter({
  mode: 'history',
  routes : [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '*', component: NotFound }
  ]
})


export default router

생성한 각 각의 컴포넌트들을 import하여 라우팅시켜 주었다.

 

App.vue

<template>
  <div id="app">
  여기서 부터 코드 시작
  <!-- router/index.js 파일로 이동 -->
  <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

<style>

</style>

root App인 App.vue에 router-view로 맵핑시켜 각 라우팅 설정에 따른 페이지 이동이 가능하게 하였다.

 

main.js

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

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

App.vue로 이동하도록 경로 설정한다.