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

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" >
        <navigationPage />
        <div >
          <modalPage v-if="modalActive" />
        </div>
      </div>
      <div v-else >
        <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!

CodePudding user response：

Because of using

export { router }

in router.js, you need to

import { router } from '../router/router.js'

in main.js

CodePudding user response：

Solved, I had misunderstand the router-view, so I got rid of that in my view components and added one inside the App.vue template