Vue Router, refresh shows blank page

Question

Im trying to figure out why Vue.js routing, after I refresh my admin page re-directs back to the home component, only showing a blank page, and after a second refresh shows the home component again. I am still logged in as I can still go directly with the url to my admin-page. Meaning the session is still active. Is there a way to force the page to stay on the admin home page when I press F5? I tried things like history mode etc, but cant figure it out.

This is my router.js layout in the root and alos my main router file

import Vue from 'vue'
import Router from 'vue-router'
import firebase from "firebase/app";
import Home from './views/user/Home.vue'
import adminRoute from "./components/routes/admin-routes";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/',
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: false,
      }
    },
      ...adminRoute
  ],
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requiresAuth === false)) {
    next()
  } else if (!firebase.auth().currentUser) {
    next(false)
  } else {
    next()
  }
});

export default router

and I have my admin-routes.js

    import AdminHome from "../../views/admin/AdminHome";
    import Users from "../../views/admin/Users";

    const adminRoute = [
        {
            path: '/admin-home',
            name: 'AdminHome',
            component: AdminHome,
            meta: {
              requiresAuth: true
            },
        },
        {
            path: '/users',
            name: 'Users',
            component: Users,
            meta: {
                requiresAuth: true,
            }
        }
    ];

export default adminRoute;

I do want to mention that my main page is under views/user/Home.vue and my AdminHome page is views/admin/AdminHome.vue

Answer 1

in vue4 they did away with the 'next' argument(see here), this is working for me to send people back to the login page, where I'm using firebaseui, I have a simple boolean flag in my vuex store named "isAuthenticated" that I flip on when a user signs on.

NOTE: the following is a boot file for quasar v2 but the logic will work where ever you have access to the store

import { computed } from 'vue'

export default ({ app, router, store }) => {
    console.log('nav.js:')
    const isAuthenticated = computed(() => store.state.auth.isAuthenticated)
    console.log('isAuthenticated',isAuthenticated.value)
    router.beforeEach((to, from) => {
        console.log('nav.js:beforeEach:to',to)
        console.log('nav.js:beforeEach:from',from)
        if (to.matched.some(record => record.meta.requiresAuth)) {
            if (!isAuthenticated.value) {
                console.log('nav.js:beforeEach:to.redirect')
                return '/login'
            }
        }
    })
    
}

Answer 2

This problem is return to the server not the built app you have to manage your 404 not found root Here you can find the solution

and if you work With Netlify you just create a file in the root of the project ( same place as package.json) name netlify.toml containing

[[redirects]]
from = "/*"
to = "/index.html"
status = 200