Avoid page transitions only for specific routes

Using Ionic 5.6.13 / Vue 4.5.12 / Capacitor 6.17.0 VueRouter

Goal … I want to load some routes with no transitions/animations (depending on circumstance)

Setup … Single Page (Ionic/Vue) App…<main-menu> component used as a sidemenu. MainMenu.vue (see below) contains an <ion-list> with <ion-items>. The click handler 'navigateTo({name: routeName}) is a helper that simply invokes this.$router.push({name: routeName})

Problem … All the routes loaded by ‘push’ have a distinct platform-specific animation. However, some routes would be best to just appear, without animation. I could not find a means to suppress the default animation on a per-route basis. I tried passing a configuration object to this.$router.push(namedRoute, config) but keys like ‘transition’:‘none’ or ‘animate’:‘none’ had no effect and I cannot find any that do. I also tried adding a ‘router-link’ attribute to the <ion-button> which does load a route using a string such as ‘/some/path’, but does not accept Route objects, i.e. named routes as in {name: routeName} which is preferred for larger use cases.

In the framework docs, <ion-router-link> is not rec’d for Vue (and indeed loads nothing from the @ionic/vue package even if I try). Also, the <router-link> and <transition> components are Vue specific (not Ionic … which is responsible for the page transition animations). Setting the router-direction attribute on the <item> also had no effect.

QUESTION … What is ‘best practice’ to suppress page transition/animations for specific routes when using the Vue router in Ionic?

Example Code…

<template>
  <ion-menu menu-id="main-nav-menu" content-id="main-content">
    <ion-content>
      <ion-list lines="none">
        <ion-item button @click="navigateTo({ name: 'Home' })">
          <ion-icon :icon="home" slot="start"></ion-icon>
          <ion-label>Home</ion-label>
        </ion-item>
        <ion-item button @click="navigateTo({ name: 'UserProfile' })">
          <ion-icon :icon="personOutline" slot="start"></ion-icon>
          <ion-label>User Profile</ion-label>
        </ion-item>
        .........more list items

 methods: {
    navigateTo(nextRoute) {
    menuController.close('main-nav-menu');
    this.$router.push(nextRoute);
  },

1 post - 1 participant

Read full topic