URL changes when navigating to component but not content

Ionic Framework Ionic Vue
#1

Hi everyone,

I got a Problem with my routing. My App routing flow looks like this:

Page 1 → Page 2 → Tabs Page → Page 3

It is a sports App. The user can enter on Pages 1 and 2 some details an in the tabs page the scores for each round. There are 5 rounds, each in one tab. After entering the scores for each player the app navigates to an overview page 3. When routing to Page 3 the URL changes but not the content of the page. The computed methods in my setup of the composition api implementation are also called. Unfortunately this is not always the case. When i navigate from round 1 to 5 and then to page 3 without entering scores the navigation work correctly.

I am using firebase to store the scores in a realtime database. The id from the firebase collection is part of the url and passed to each page. The 5 rounds in the tabs page are also dynamic with an round id so the path looks like this: karting/championship/myidfromfirebase/lap/3 for the tab of the 3rd lap.

I recognized when I switch from tab 1 to tab 2 the lifecycle hooks “page will leave” and “page will enter” of the child page (laps) for the round are called two time each. I dont know if this is another error or it leads to the router error. The Tabs parent page “will leave” is called after the setup of page 3

Here is my router:

  {
    path: '/karting/championship/start',
    name: 'championshipStart',
    component: () => import('../views/championshipStart.vue'),
  },
  {
    path: '/karting/championship/:KKid/drivers',
    name: 'championshipDrivers',
    component: () => import('../views/championshipDrivers.vue')
  },
  {
    path: '/karting/championship/:KKid/laps',
    name: 'championshipLaps',
    component: () => import('../views/championshipLaps.vue'),
    children:[
      {
        path: ':lap',
        name: 'LapPage',
        component: () => import('../views/LapPage.vue')
      }
    ]
  },
  {
    path: '/karting/championship/:KKid/zusammenfassung',
    name: 'championshipZusammenfassung',
    component: championshipZusammenfassung
  },

and my tab bar

      <ion-tabs>
        <ion-router-outlet></ion-router-outlet>
        <ion-tab-bar slot="bottom">
          
          <ion-tab-button tab="lap1" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/1'">
            <ion-label class="lapLabel">1</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="lap2" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/2'">
            <ion-label class="lapLabel">2</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="lap3" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/3'">
            <ion-label class="lapLabel">3</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="lap4" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/4'">
            <ion-label class="lapLabel">4</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="lap5" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/5'">
            <ion-label class="lapLabel">5</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>

I navigate to Page 3 like that

const navigateTozusammenfassung= (async() =>{
      router.navigate('/karting/championship/' + aktivesKKid.value + '/zusammenfassung','forward')
    })

Does anyone know why the page is not rendering? Thanks

#2

I am facing a similar issue. But, in my case, it occurs with using the back button in the browser.

#3

Have you verified every page is wrapped in an ion-page?

#4

yes every Page is wrapped in an ion-page tag except a custom component i am importing like this:

import DriverListElementComponent from '@/components/DriverListElementComponent.vue';
#5

Ok. Another item to note is that Ionic recommends using “Shared URLs” vs. “Nested Routes” - reference.

You are using a nested route for LapPage.vue which could be causing issues.

Also, assuming you are on Ionic 6?

#6

Yes I use Ionic 6. I thought I follow the recommendation of Ionic. I am using nested routes only for the championshipLaps.vue which contains tabs for each lap. Every Tab uses the same component with a different lap id.

My app.vue contains an ion-router-outlet and the the championshipLaps.vue also.

I wanted to avoid writing 5 components for the 5 Laps. Is there a better solution for this use case?

1 Like
#7

Seems like the correct setup for a tab project looking at the Vue Tab Starter project.

I don’t have a great understanding of all the inner workings of the ion-router-outlet; however, I could see there being issues of navigating to different tabs when its the same URL (but different params).

I would try creating separate routes for each lap.

Routes

{
    path: '/karting/championship/:KKid/laps',
    name: 'championshipLaps',
    component: () => import('../views/championshipLaps.vue'),
    children:[
      {
        path: 'lap1',
        name: 'Lap1Page',
        component: () => import('../views/LapPage.vue')
      },
      {
        path: 'lap2',
        name: 'Lap2Page',
        component: () => import('../views/LapPage.vue')
      },
      {
        path: 'lap3',
        name: 'Lap3Page',
        component: () => import('../views/LapPage.vue')
      }
      // etc.
    ]
  }

Tab Bar

<ion-tab-button tab="lap1" v-bind:href="'/karting/championship/' + aktivesKKId + '/laps/lap1'">
  <ion-label class="lapLabel">1</ion-label>
</ion-tab-button>

Another option is to create separate views/components for each lap with each wrapping the LapPage component passing in the lap # via a property (to reduce duplication).

Lastly, you could also try your code as is but forcing a screen update by looking at the param :lap in ionViewWillEnter but that doesn’t solve the problem of the hooks being called twice.

1 Like
#8

Thank You for the answers. I completely deleted the ion-router-outlet and created 5 views with each of them containing the same component for entering the points. That solved all problems mentioned above. But i wanted to use the Tabbar because I thought it was the right use case for that :slight_smile: . I have now created cutom tab buttons and placed them into a footer component.

1 Like
#9

Have you looked at the segment component in Ionic? It is a similar component that might fit for what you are doing.