Router navigation between tabbed and and other screens

1

Hi all!

It must be something very simple but I can’t seem to find root cause of it. I have an app with two screens. Login screen and a tabbed home screen which has 4 tabs.
The issue is that once I navigate back to login screen it gets placed within DOM as a child of a currently shown tab (Profile). Not sure if my markup, router config, or navigation way if wrong.

This is how login screen is slotted initially:

Screenshot 2020-12-22 at 10.38.41
Screenshot 2020-12-22 at 10.38.411244×340 52.8 KB

After users login then are taken to home screen which has tabs. Within profile screen users can logout. Which triggers the following:
$f7.views.current.router.navigate('/login/', {reloadAll: true});

Which is mapped to:

const routes = [
...
  {
    path: '/login/',
    component: Login,
    meta: {
      authNotRequired: true
    },
    beforeEnter: (to, from, resolve, reject) => {
      console.log(`beforeEnter: /login/ from ${from.path}`);
      // debugger;
      resolve();
    }
  },
 ...
}

Which causes login screen to be shown but looking at the DOM its nested within the last shown tab:

Screenshot 2020-12-22 at 10.38.04
Screenshot 2020-12-22 at 10.38.041286×550 98.3 KB

Once re-logged in the UI is off as well. It has two tab rows at the bottom and so on…

Does anyone have any ideas to what this could be caused by?

Thanks in advance!

2

Show the layout & location of your login-screen class so we can see how you used it.

3

Thanks for the help but i’ve sorted it out. It was before holiday so cant remember every detail but it boils down to something among the lines of the following: Navigation was inserting the login screen into a “main” view where none of mine had the attribute set for it. So somehow the view element of the tab which had the logout button was used as “main” view and so login screen html elements were inserted there. Probably does not make much sense to you and I’m not sure I’m even using the tabbed view correctly but it works for now. :slight_smile:
I solved the issue by wrapping my home screen (the one which has tabs) with a <f7-view main> element. This caused the home screen to be removed and replaced with the login screen on logout. Which is what I need.