View is not changing but url does

my problem is that navigation between outlets is not showing the page.
example:
1- /login => /user/home => /login (login is not showing and can’t change route to any other page)
2- /user/home => /login => /user/home (the same problem)
3-/user/home => /user/rating (the same one)
this is the routes =

 [
    {
        path:"/",
        redirect: "/login"
    },
    {
        path: '/login',
        name: 'auth',
        meta: {
            onlyWhenLogout: true,
        },
        component: ()=>import("@/views/auth/views/phone"),
    },
    {
        path: "/user",
        name: 'user',
        component: ()=>import('../views/user/main/main/mainView'),
        children: [
            {
                redirect: "/user/home",
                path: ''
            },
            {
                path: "home",
                name: 'user-home',
                component: ()=>import('../views/user/main/views/home'),
            },
            {
                path: "profile",
                name: 'user-profile',
                component: ()=>import('../views/user/main/views/user-profile'),
            },
            {
                path: "family",
                name: 'user-family',
                component: ()=>import('../views/user/main/views/user-family'),
            },
            {
                path: "history",
                name: 'user-history',
                component: ()=>import('../views/user/main/views/user-history'),
            },
           
        ],
            
    },
   {
                path: "/user/rating",
                name: 'user-rating',
                component: ()=>import('../views/user/main/views/user-rating'),
            },
    {
        path: "/driver",
        name: 'driver',
        component: ()=>import('../views/driver/main/mainDriverTabs'),
        children: [
            {
                path:'',
                redirect:'/driver/home'
            },
            {
                path:"home",
                name:"driver-home",
                component:() => import("../views/driver/views/driver-home")
            },
            {
                path:"drivers",
                name:"driver-drivers",
                component:() => import("../views/driver/views/driver-drivers")
            },
            {
                path:"profile",
                name:"driver-profile",
                component:() => import("../views/driver/views/driver-profile")
            },
            {
                path:"dashboard",
                name:"driver-dashboard",
                component:() => import("../views/driver/views/driver-dashboard")
            },
            {
                path: "wallet",
                name: 'driver-wallet',
                component: ()=>import('../views/driver/views/driver-wallet'),
            },
        ]
    },
    {
        path: "/driver/select-car",
        name: 'driver-select-car',
        component: ()=>import('../views/driver/views/driver-selectCar'),
    },
    { path: '/:pathMatch(.*)*', redirect: '/' }
]

Welcome to the community!

On a side note, please use proper code blocks :grinning: - Extended Syntax | Markdown Guide

I would first make sure you have an IonPage on every page. If you don’t, weird things will happen.

This also could be related to this issue bug: vue, non-tab routes getting added to tabs location history · Issue #24859 · ionic-team/ionic-framework · GitHub which was fixed in v6.1.0. You can get what version you are running by running ionic info. You want the “Ionic Framework” version.

done editing. yes i have ion page at all of these components

Thanks! :smile:

Another item to note is that it is recommended to use Shared URLs and not Nested Routes for non-tab routes - reference.

Are you able to provide a test repo replicating the issue?

look my app three types of pages:
1-side menu for user
2-tabs for driver
3-login
so to make the sidemenu I must use nested URLs right?
github repo:GitHub - zelony/otlob-ogra

Unfortunately I cannot build the project, getting a type error with the vue-cli-plugin-i18n package.

You also have a lot going on :joy:

It might be good to reference the starter projects here. It’s very possible there is an issue or conflict with the ion-router-outlet as you have four of them. You can have multiple but not sure on the proper way to set them up. Unfortunately that is out of my wheelhouse as I don’t fully understand the Ionic magic with the router…lol.

UPDATE
Here is another resource that might be helpful.

try remove it and i18n package and plugins/i18n.js and run

npm install vue-i18n@next

and the example is not use full is he put the sidemenu in the app.vue and i want something like 2 apps in one app and each app has way to navigate