Ionic Vue components get stack on top of each other when using router

Ionic Framework Ionic Vue
1

I have a problem, where when I use Vue Router for navigation, components don’t disappear, the new one just places on top of old one.

My router file

import {createRouter, createWebHistory} from '@ionic/vue-router';
import {RouteRecordRaw} from 'vue-router';
import {AuthManager} from "@/functions/AuthManager";
import HomePage from '@/views/MainPage.vue';
import LoginScreen from '@/views/auth/LoginScreen.vue';
import component from "*.vue";
import RegistrationScreen from "@/views/auth/RegistrationScreen.vue";
import MainPage from "@/views/MainPage.vue";

const routes: Array<RouteRecordRaw> = [
    {
        path: '',
        redirect: '/homepage',
    },
    {
        path: '/login',
        name: 'Login',
        component: LoginScreen,
        meta: {
            requiresAuth: false
        }
    },
    {
        path: '/register',
        name: 'Register',
        component: RegistrationScreen,
        meta: {
            requiresAuth: false
        }
    },
    {
        path: '/home',
        name: 'MainPage',
        component: MainPage,
        meta: {
            requiresAuth: true
        }
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
})
//code from https://stackoverflow.com/a/52663166 and modified to fit my needs
router.beforeEach(async (to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in
        // if not, redirect to login page.
        if (!await AuthManager.isLoggedIn() && to.name != "Login") {
            next({name: 'Login', hash: '#forced'});
        } else if ((to.name == "Login" || to.name == "Register") && await AuthManager.isLoggedIn()) {
            next({name: 'Homepage'});
        } else {
            next() // go to wherever I'm going
        }
    } else {
        next() // does not require auth, make sure to always call next()!
    }
})


export default router

How I navigate

<ion-text @click="() => router().push('/register')" style="cursor: pointer" class="ion-padding-top">Nemáte účet? Zaregistrujte se</ion-text>

UCOMm
UCOMm1940×2086 191 KB

I can’t find a way to make old component disappear. Where Am I doing something wrong?
I asked on StackOverflow too

1 Like