Using $router.push with an animation direction

I tried to do something like this:

this.$router.push({
	path: '/tabs/home',
	routerDirection: 'back'
});

That doesn’t work unfortunately but I need to be able to call the route in code and adjust the direction of the animation. Possible?

Oh and while I’m asking, how can I push props as well?

You really shouldn’t be pushing tabs/home abs you should really have the bulk of the data in a state manager :eyes:

Good point. I thought Vuex wasn’t ready for Ionic/Vue 3 so I’ve been working without one for now.

You can manage state with composition API, see post below

1 Like

I’ll check it out. Now lets say I am running this command: https://github.com/aaronksaunders/ionic-vue3-sample-3/blob/903e051504792966db775b35a95c03f26c9f6ee3/src/views/AllUploads.vue#L7 doLogout() how do I get that to animate so it looks more realistic to being logged out? Can you adjust this stuff in the router?

i am not the UI animation guy… but check this out maybe? https://cssreference.io/animations/

I’m pretty good at front end CSS animation work but this seems like a missing feature that you can define routerDirection in a <ion-button> for example, but you can’t in code. I wish my problems could be solved with just a button and setting the router direction, but unfortunately the majority of the time I need to call a method so I can fire off multiple events.

Looking at the ion-router-outlet it looks like I can turn off animation (which I’ve talked about in another post), but this time I want to reverse the animation so I’ll look at the animation property.

I can’t think of an easy way to do this off the top of my head. Having a feature like this that lets you do programatic navigation and control the animation + direction could be useful.

Would you be able to create a feature request and describe the use case/problem you are trying to solve?

What I can probably do is extend the useIonRouter hook to expose a navigate method which would let you call $router.push and still have control over routerAnimation and routerDirection: https://github.com/ionic-team/ionic-framework/blob/67b0853b28f117f35f558993be87186ca548130b/packages/vue/src/hooks.ts#L25-L31

1 Like

As a temporary workaround you could do something like the following:

import { inject } from 'vue';

...

const ionRouter = inject('navManager');

ionRouter.navigate({
  routerDirection: 'back',
  routerLink: '/tabs/home'
});

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

1 Like