Why are there no examples of nonlinear routing for tabs?

Ionic Framework Ionic Vue
1

SO I am reading through the docs and I see that there are suggestions on what NOT to do when using nonlinear routing /tabs routing, but there are no examples of what to do and how to handle navigation when implementing nonlinear routing. I have questions on the actual act of navigation. EG: If I don’t just want a user to immediately route from an href, say if they are not authenticated in the app what are best practices? Do I need to create a store of app navigations and check against them or is there a way to access the routing via the vue-router. Any additional info on the topic would be great. Thanks!

2

If you have routes requiring authentication, then you would use a navigation guard to redirect the user back to the login screen if they are not logged in.

All other navigation follows typical Vue Router best practices.

It might be helpful if you have some more specific questions.

3

I have routing guards in place in the router file. I was implementing a check before hitting them though in TabRoot.vue. For specifics:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons color="primary" slot="primary">
          <ion-button color="primary" id="open-modal" expand="block">{{ auth.userCredential ? '' : 'Sign In'
          }}</ion-button>
        </ion-buttons>
        <ion-title>BluJobz</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home" @click="handleTabClick('tabs/home')">
          <ion-icon :icon="homeOutline" />
          <ion-label>Home</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="train" @click="handleTabClick('tabs/train')">
          <ion-icon :icon="fileTrayStacked" />
          <ion-label>Train</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="search" @click="handleTabClick('tabs/search')">
          <ion-icon :icon="search" />
          <ion-label>Job Search</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="profile" @click="handleTabClick('tabs/profile')">
          <ion-icon :icon="personOutline" />
          <ion-label>Profile</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
    <ion-modal ref="modal" trigger="open-modal" >
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="end">
            <ion-button @click="cancel()">Cancel</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <SignInModal />
    </ion-modal>
  </ion-page>
</template>

the handleClick is a secondary measure that stops navigation and fires a modal asking the user to sign in. So your suggesting allow the navigation to attempt and catch it with something like the beforeRouteLeave in the component?

4

I would probably create a global router.beforeEach guard and if not logged in, have your modal pop up, and return false stopping the navigation.

This would simplify your logic removing the need to use handleTabClick.