I am getting no error but a couple of warnings: I am sharing the image of the application landing page, It's a completely blank page, while it runs nicely in localhost:

Codes from router.js

import { createRouter , createWebHistory } from 'vue-router'
import store from './store'

import website from './app/layout/website.vue'


import home from './app/website/frontpage.vue'
import hospitals from './app/website/hospitals.vue'


import notfound from './app/website/not_found.vue'

const routes = [
    {
        path : '/',
        name : 'home',
        component : home,
        meta : { layout: website, visitor : true, requiresAuth : true}
    },
    {
        path : '/hospitals',
        name : 'hospitals',
        component : hospitals,
        meta : { layout: website, visitor : true, requiresAuth : true }
    },

    {
        path: '/:pathMatch(.*)*',
        name: 'notfound',
        component: notfound,
        meta: {layout: website, visitor : true}
    }
]

var router = createRouter({
    history : createWebHistory(process.env.BASE_URL),
    routes
})

function loggedIn() {
    return store.state.authenticated
}

router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if(!loggedIn()) {
            next({name : "login"})
        }else{
            next()
        }
    }else if(to.matched.some(record => record.meta.visitor)) {
        if(loggedIn()) {
            next({ name : "dashboard"})
        }else{
            next()
        }
    }else{
       next()
    }
})

export default router

It was working while I uploaded without any CRUD system, just routes,app,store etc and html.

CodePudding user response：

You need to edit this code to be like this

if(!loggedIn() && to.name!="login") { next({name : "login"}) }
else{ next() }

The problem is the router is redirect user even in the login page and that make infinite loop