Avoid page transitions only for specific routes

Ionic Framework Ionic Vue
1

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);
  },
2

In Ionic Vue v5, the best way to do this is to use :router-link="/myroute" and then set router-direction="none" on your button. Doing this will disable any page transition.

In Ionic Vue v6, we are introducing a new API that will let you do programmatic navigation while also controlling the animation: Vue Navigation | Ionic Documentation

3

Thanks. I did read the Navigating using router-link section in the docs, but still could not get the example code to work. However, when carefully reading your response, I noticed a v-bind directive preceding the router-link attribute. It would be easy to miss on a scan read (just a preceding ‘:’) but that made all the difference.

Did not work…

        <ion-item button router-link="{name:'Messages'}" router-direction="none">  </ion-item>

       [Vue Router warn]: No match found for location with path "{name:'Messages'}"

Works !

<ion-item button :router-link="{name:'Messages'}" router-direction="none">  </ion-item>

The only example code in the Navigating using router-link docs shows passing just a simple path ("/page2") to the router-link attribute, not an object. So thanks for helping me fix this quirksome behavior. And, yes , looking forward to v6 allowing fine grain control of page transitions.

Solved: When passing a named route to the router-link attribute, use v-bind

1 Like