Vue 새로고침 시 router 가 초기화 될 때

막상 해결하고 보니 너무 어이가 없었던 오늘 겪었던 오류 한가지를 소개해 드립니다.

 

1. App.vue

<template>
  <v-btn @click="changeRoute('new')"/>
  <v-btn @click="changeRoute('home')"/>
  <router-view/>
</template>

<script>
 export default {
   methods: {
     changeRoute (name) {
       this.$router.push({ name: name })
     }
   }
 }
</script>

 2. main.js

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

const router = new Router({
  mode: 'history',
  routes: [
    {path: '', name: 'home', view: 'Home' },
    {path: 'new', name: 'new', view: 'New' },
    {path: '*', redirect: '/'}
  ]
})

Vue.use(Router)

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

위 코드에서 보시다 시피 버튼 두개로 home 과 new 를 번갈아 가면서 이동하는 단순한 구조입니다.

 

그런데 new 로 이동 후 창을 새로고침 하면 자꾸만 home이 뜨는 현상이 발생했습니다.

 

실제 코드는 이것보다 더 복잡했으니 찾는데 한참 걸렸습니다.

 

과연 무엇이 문제 였을까요? ( 정답은 아래에 )

 

 

 

 

 

 

 

 

 

 

 

 

 

 

history 모드의 path에서 '/' 을 빼먹었던게 문제였죠.. ㅠ_ㅠ 

 

이거 하나를 못본 탓에 거의 하루를 날려버렸네요.