Vue js can't find page when deployed on firebase

Question

I'm building a stupid web app to do something funny with my friends. I'm using firebase hosting service and discord oauth2. The problem occurs when trying to access "/login" page by typing it on the url or after pressing "authorize" on the discord link. You can try it here: https://pelata-gambling.web.app/ (or look the images below), click the green button then click on the blue one. You'll end up in a 404 default page. So the "/login" page is accessible only if you press the first green button and you can't reach it from anywhere else. I just can't understand how this is happening. This doesn't happen when running the app locally (with npm run dev) and indeed works as intended.

This is the landing page where you are supposed to press the green button

This is the "bugged" page, the one that you can only reach via the previous page

If you try to access the page by looking for the url https://pelata-gambling.web.app/login you'll end up in a 404 somehow.

These are the code snippets(let me know if you need more):

Router:

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '../views/HomePageView.vue'
import discordlogin from '../views/DiscordLoginView.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'homepage',
      component: homepage
    },
    {
      name: "discordlogin",
      path: "/login",
      component: discordlogin
    }
    
    
  ]
})

Discord login page (the second page, the one which is unreachable):

<template>
  <div>
    <section class="vh-100 gradient-custom">
      <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col-12 col-md-8 col-lg-6 col-xl-5">
            <div class="card bg-dark text-white" style="border-radius: 1rem;">
              <div class="card-body p-5 text-center">

                <div class="mb-md-5 mt-md-4 pb-5">

                  <h2 class="fw-bold mb-2 text-uppercase">Registrati con Discord</h2>
                  <p class="text-white-50 mb-5">Sarai rindirizzato a discord</p>





                  <button @click="discordLink()" class="btn btn-outline-light btn-lg px-5" type="submit">Registrati <img
                      src="../assets/images/discord-ico.png"></button>

                  <div class="d-flex justify-content-center text-center mt-4 pt-1">
                    <a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
                    <a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
                    <a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
                  </div>

                </div>

                <div>
                  <p class="mb-0">Having problems? <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                      class="text-white-50 fw-bold">I don't care! LMAO</a>
                  </p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "discordlogin",
  data() {
    return {}
  },
  methods: {
    discordLink() {
      window.location.replace(window.location.hostname === "localhost" ?
        "https://discord.com/api/oauth2/authorize?client_id=972163681175611&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin&response_type=code&scope=identify%20email%20guilds%20guilds.members.read" :
        "https://discord.com/api/oauth2/authorize?client_id=972163681175611&redirect_uri=https%3A%2F%2Fpelata-gambling.web.app%2Flogin&response_type=code&scope=identify%20email%20guilds%20guilds.members.read"
      )
    }
  },
  async mounted() {
    var qs = require('qs');
    const urlParams = new URLSearchParams(location.search);
    const code = urlParams.get("code")


    console.log(code)
    var data = qs.stringify({
      'client_id': '***',//removed for stackoverflow
      'client_secret': '***',
      'grant_type': 'authorization_code',
      'redirect_uri': `${window.location.origin}${window.location.pathname}`,
      'code': code
    });
    var config = {
      method: 'post',
      url: 'https://discord.com/api/oauth2/token',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'

      },
      data: data
    };

    axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });

  },
}
</script>

<style>
.btn.btn-outline-light {
  background-color: #5865F2 !important;
  border: 0px !important
}

.btn.btn-outline-light:hover {
  background-color: white !important;
  border: 0px !important
}
</style>

Thanks to everyone who is trying to help

EDIT: i removed mode: 'history' from the router config and seems to work now but it's still weird

Answer 1

removing mode: 'history' from the router config solved my issue but i don't know if it is a good solution