после режима: «история» Vue маршрутизатор не работает

Я начал изучать vuejs в последнее время, а также создавать и использовать приложение firebase для аутентификации. У меня возникла проблема после того, как я установил тему webpack и попытался удалить хэштаг по умолчанию по ссылкам. Когда я вставляю mode:history он не перенаправляет меня после входа в систему на мою страницу приветствия. Когда я удаляю его, все работает нормально.

Мой index.js (под моей папкой router):

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      redirect: '/login'
    },
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/sign-up',
      name: 'SignUp',
      component: SignUp
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser;
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('hello')
  else next()
})

export default router

И вот образец моей кнопки входа:

<button class="btn" type="submit" v-on:click="signIn">Log In</button>

И мой компонентный скрипт:

<script>
  import firebase from 'firebase'

  export default {
    name: 'login',
    data: function() {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      signIn: function() {
        firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
          (user) => {
            this.$router.replace('hello')
          },
          (err) => {
            alert('Oops. ' + err.message)
          }
        );
      }
    }
  }
</script>

Связано ли это с функцией v-on:click?

Pls сообщит мне, если вам нужно что-нибудь еще для решения моей проблемы.