No navigation animation when I use router.push?

Ionic Framework Ionic Vue
1

Is it possible to disable the animation transition between two pages ?

I would like to keep the animation for some nested routes but disable it for other links.

For now I navigate between pages programmatically like this, but I don’t think I can disable the animation directly in $router.push

this.$router.push('/game/' + this.$route.params.gameId + '/' + pageId);

And if I disable the animation on the router-outlet it will disable animation for all links.

2

Using $router.push, no. We have plans to expose an API that lets you navigate programmatically and control the animation.

As a temporary workaround, you can do something like this:

import { inject } from 'vue';

...

const ionRouter = inject('navManager');

ionRouter.navigate({
  routerDirection: 'none',
  routerLink: '/game/' + this.$route.params.gameId + '/' + pageId
});

Once the feature gets added, definitely move off this workaround. navManager exposes the internal IonRouter instance, so APIs in there could change at any time.

1 Like
3

If you prefer not to use the internal API, you can set router-link and router-direction on any Ionic component. This approach uses public APIs, but it only does navigation as opposed to a click handler which could let you do other tasks like fire off a network request before navigating:

<ion-button :router-link="'/game/' + this.$route.params.gameId + '/' + pageId" router-direction="none"
1 Like
4

Thank for the quick answer and workaround.

It works if I set the ionRouter constant inside the mounted() function otherwise If I do it on the fly in a method I get a Vue warning :

inject() can only be used inside setup() or functional components.
5

Good catch! Yes, the inject() function can only be called during setup() as per the Vue 3 docs: Provide / Inject | Vue.js.

You can also use inject in a non-Composition API scenario: Provide / inject | Vue.js