router 설정

화면에서 메뉴 클릭시 라우터를 거쳐서 해당 페이지를 호출한다.

import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'

Vue.use(Router)

Vue.prototype.$axios = axios
const apiRootPath = process.env.NODE_ENV === 'production' ? '/rice/' : '/rice/'
Vue.prototype.$apiRootPath = apiRootPath
axios.defaults.baseURL = apiRootPath

const originalPush = Router.prototype.push

Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  })
}

export default new Router({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: () => import('../views/dashboard')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login')
    },
    {
      path: '/menu1',
      name: 'menu1',
      component: () => import('../views/menu1')
    },
    {
      path: '/menu2',
      name: 'menu2',
      component: () => import('../views/menu2')
    },
    {
      path: '/menu3',
      name: 'menu3',
      component: () => import('../views/menu3')
    },
    {
      path: '/detail/:id?',
      name: 'detail',
      component: () => import('../views/detail')
    },

    {
      path: '*',
      name: 'e404',
      component: () => import('../views/e404')
    }
  ]
})

const originalPush = Router.prototype.push

 

Router.prototype.push = function push (location) {

  return originalPush.call(this, location).catch(err => {

    if (err.name !== 'NavigationDuplicated') throw err

  })

}

이 부분을 작성하지 않으면 똑같은 url을 호출시 이미 페이지가 열려 있어서 오류 메세지가 발생한다. 열려 있는지 중복체크를 넣어 줘야 에러가 없이 처리 된다.