[vue.js] vue-router 설치 및 구성

[vue.js] vue-router 설치

• vue-router 는 url 주소에 대한 navigator 역할을 하는 중요 라이브러리이다.

참고 사이트 : https://router.vuejs.org/kr/installation.html

1. npm 을 사용한 vue-router 설치

• 명령어

npm install vue-router --save

2. router 관련 vue 파일 생성

• src 폴더 내 router 폴더를 생성

• router 폴더 내 index.js 파일을 생성

• 아래 코드를 통해 router 를 추가한다.

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  ​
  Vue.use(VueRouter)
  ​
  const router = new VueRouter({
    mode: 'history',
    routes: [
      { 
        path: '/', 
        component: Home,
        beforeEnter: requireAuth
      },
      { 
        path: '*', 
        component: NotFound 
      }
    ]
  })
  ​
  export default router

3. main.js 내 vue-router 관련 코드 추가

• main.js 파일 내

  • import router from './router'

  • Vue 클래스 내 router 추가

• 예제

  import Vue from 'vue'
  import './plugins/vuetify'
  import './plugins/vuetify'
  import App from './App.vue'
  import 'roboto-fontface/css/roboto/roboto-fontface.css'
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  import router from './router'
  ​
  Vue.config.productionTip = false
  ​
  new Vue({
    render: h => h(App),
    router
  }).$mount('#app')

4. App.vue 내 router

• App.vue 코드에서 주소별 다르게 나와야 하는 위치에 아래 코드 추가

  • <router-view></router-view>