Page router link not loading the second time

Ionic Framework Ionic Vue
1

Hello everybody,

I’m currently doing a project for my university, where I have to build an application.

Unfortunately the routing for my Website only works the only the first time. So the page doesn’t render the second time. Here is my routing (it is the case for all pages):

import { createRouter, createWebHistory } from '@ionic/vue-router';

import WebApplication from '../Pages/WebApplication.vue'
import OEESimulation from '../Pages/OEE Simulation.vue';
import RoSSimulation from '../Pages/RoS Simulation.vue';

const OEEmachinePages = [];
for (let i = 1; i <= 6; i++) {
  OEEmachinePages.push(import(`../Pages/OEE Machines/OEE Machine ${i}.vue`));
}

const InputOEEPages = [];
for (let i = 1; i <= 6; i++) {
  InputOEEPages.push(import(`../Pages/Input Screens/Input M${i} OEE.vue`));
}

const routes = [
  { path: '/', redirect: '/OEEwebapplication' },
  { path: '/OEEwebapplication', name: 'OEEWebApplication', component: WebApplication },
  { path: '/OEE Simulation', name: 'OEESimulation', component: OEESimulation },
  { path: '/RoS Simulation', name: 'RoSSimulation', component: RoSSimulation },
  ...OEEmachinePages.map((page, index) => ({
    path: `/OEEMachine-${index + 1}`,
    name: `OEEMachine${index + 1}`,
    component: page
  })),
  ...InputOEEPages.map((page, index) => ({
    path: `/InputM${index + 1}OEE`,
    name: `InputM${index + 1}OEE`,
    component: page
  }))
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

→ OEEwebbapplication → OEESimulation → OEEMachine-1 → OEESimulation (It doesn’t matter whether I use a button to get back or the “back” button of the browser).

Can someone help me? Let me please know, if you need additional information.

2

It’s a little odd that you have spaces in your Component file names OEE Simulation.vue and file paths /Pages/OEE Machines/. I am not sure if that would cause issues but it is definitely not good practice.

What does the code for one of your pages look like? Are all your pages wrapped in an IonPage?

3

Hi twestrick,

thank you for your reply.

I removed all the spaces now.

Here is an exemplary code:

<template>
  <div id="app">
    <Menu /> 
  </div>
    <ion-page id="main-content">
            <ion-header>
                <ion-toolbar>
                    <ion-buttons slot="start">
                        <ion-menu-button>
                        </ion-menu-button>
                    </ion-buttons>
                    <ion-title style="text-align:center" router-link="/page1">OEE Web Application</ion-title>
                </ion-toolbar>
            </ion-header>
        <ion-content class="ion-padding">
            <h3 class="no3"><span>On this page, you can simulate <b>OEE</b> values</span></h3>
            <h3 class="no2"><span>First select your <b style="color: rgb(0, 84, 233)">machine</b></span></h3>
            <p></p>
            <ion-list>
                <ion-item>
                    <ion-select label="Select a Machine" label-placement="stacked" placeholder="Select Machine" @ion-change="handleChange">
                        <ion-select-option value="Machine 1">Machine 1</ion-select-option>
                        <ion-select-option value="Machine 2">Machine 2</ion-select-option>
                        <ion-select-option value="Machine 3">Machine 3</ion-select-option>
                        <ion-select-option value="Machine 4">Machine 4</ion-select-option>
                        <ion-select-option value="Machine 5">Machine 5</ion-select-option>
                        <ion-select-option value="Machine 6">Machine 6</ion-select-option> 
                    </ion-select>
                </ion-item>
            </ion-list>
        </ion-content>  
    </ion-page>
</template>

<script>
import { IonList, IonItem, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonMenu, IonMenuButton, IonButtons, IonText, IonSelect, IonSelectOption } from '@ionic/vue'
import { defineComponent } from 'vue';

export default defineComponent({
    components: {

        IonList,
        IonItem,
        IonPage,
        IonHeader,
        IonTitle,
        IonContent,
        IonToolbar,
        IonMenu,
        IonButtons,
        IonMenuButton,
        IonText, 
        IonSelect, 
        IonSelectOption

    },
    methods: {
       handleChange(element) {
        switch (element.target.value) {
            case 'Machine 1':
                this.$router.push({ path: '/OEEMachine1'});
                break;
            case 'Machine 2':
                this.$router.push({ path: '/OEEMachine2'});
                break;
            case 'Machine 3':
                this.$router.push({ path: '/OEEMachine3'});
                break;
            case 'Machine 4':
                this.$router.push({ path: '/OEEMachine4'});
                break;
            case 'Machine 5':
                this.$router.push({ path: '/OEEMachine5'});
                break;
            case 'Machine 6':
                this.$router.push({ path: '/OEEMachine6'});
                break;
        }
       } 
    }  
});

</script>

Yes, all my pages are wrapped in an IonPage.

4

First off, IonPage needs to be the root element. You cannot have a div sibling at the same level.

You need to remove

<div id="app">
    <Menu /> 
</div>
5

Thank you,

it’s working now.

However I don’t know how to incorporate the Menu component now.
I mean if I put it into the IonPage container, it doesn’t work right (I can open it but I can’t select things or close it). Do you have an advide here?

PS: Here ion-menu: API Framework Docs for Types of Menu Components (ionicframework.com) the menu is also always used before the IonPage container.

6

Ah, that is an exception :smile: I’ve not used the IonMenu, but it would seem that you would need to make sure IonMenu is a direct sibling of IonPage and not wrapped in a div.

7

OK, but the problem is that if I make the IonMenu a sibling of IonPage, the routing back to these pages doesn’t work, so I have to choose between the Menu or the routing.

8

Can you provide a repo or StackBlitz with a minimal reproduction of this issue?