Router seems to be disabled or does not work at all, in vue js

I'm new to Vue JS and cannot figure out what's wrong with my router, but it does not seem to work at all, When I'm going to any route path of my application, it just shows my base App.vue template.

Router.js

import VirtualMachine from "../views/virtualMachine.vue";
import HomePage from "../views/home.vue";

import CustomerProfile from "../views/CustomerProfile.vue";
import LoginPage from "../views/LoginPage.vue";
import RegistrationPage from "../views/RegistrationPage.vue";

import { createRouter, createWebHistory } from "vue-router";

/* eslint-disable no-unused-vars */

const routes = [
  {
    path: "/home",
    name: "main_page",
    component: HomePage,
  },
  {
    path: "/login/",
    name: "login_page",
    component: LoginPage,
  },
  {
    path: "/register/",
    name: "register_page",
    component: RegistrationPage,
  },
  {
    path: "/virtual/machine/:VirtualMachineId",
    name: "virtual_machine",
    component: VirtualMachine,
  },
  {
    path: "/customer/profile/",
    name: "customer_profile",
    component: CustomerProfile,
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export { router }

main.js

import App from './App.vue';
import router from "../router/router.js";
import store from "../store/store.js";

import Vuex from 'vuex'
import { createApp } from 'vue/dist/vue.esm-bundler' // it's totally okay with it, I use it just because the Vue build is not supported on my Mac, so I'm using this distribution

const app = createApp(App)

app.use(router)
app.use(store)
app.use(Vuex)


app.mount('#app')

App.vue if necessary

<script>

/* eslint-disable no-unused-vars */

import { mapState, mapActions } from "vuex";
import navigationPage from "./components/NavigationPage";
import modalPage from "./components/ModalWindow";

export default {
  name: "App",
  data() {
    return {
      mobile: null,
    };
  },
  template: `
  <div v-if="virtualMachinesLoaded">
      <div v-if="!mobile" class="app flex flex-column">
        <navigationPage />
        <div class="app-content flex flex-column">
          <modalPage v-if="modalActive" />
        </div>
      </div>
      <div v-else class="mobile-message flex flex-column">
        <h2>Sorry, this app is not supported on Mobile Devices</h2>
        <p>To use this app, please use a Laptop or Another Device</p>
      </div>
    </div>
  `,
  components: {
    navigationPage,
    modalPage,
  },
  created() {
    this.GET_VIRTUAL_MACHINES();
    this.checkScreen();
    window.addEventListener("resize", this.checkScreen);
  },
  methods: {

    ...mapState(["virtualMachinesLoaded"]),

    checkScreen() {
      const windowWidth = window.innerWidth;
      if (windowWidth <= 750) {
        this.mobile = true;
        return;
      }
      this.mobile = false;
    },
  },
  computed: {
    ...mapState(["initializationModal", "modalActive", "VirtualMachinesLoaded"]),
  },
};

</script>

also at my vue templates I have <router-view /> tag as well,

If you do not see any errors, please specify the possible ones, so I'm going to check them on my own.

Thanks!