Disable IonRouterOutlet Component Caching


I am using Ionic vue and ionic vue router in version 6.0.x.
I noticed, that the IonRouterOutlet component is caching visited pages.

This looks like a nice feature in the first place. And it will be useful in most of the cases to improve app performance and save server requests.

But in some cases I want to force to re-render the page (component) every time when I come back later to that page. I did not find any way to disable caching / keep alived components. It would be just fine to destroy the component when leaving the component / page.

How can I reach this?

take a look at the specific page lifecycle events from Ionic - Vue Lifecycle | Ionic Documentation

Hi @aaronksaunders Thank you for your reply and the link to the docs! It helps a bit!
The docs explain well how it works and why it works like this.

But I could not find any information about disabling or changing the described behaviour.

A workaround in my scenario is kind of possible with the lifecycle hooks. But the better solution would be to completely destroy the “cached” pages in some cases.

I am missing kind of an option like “keepAlive” in router settings or smth similar.

Best, Nico

There is no way to do what you want with the ionic router

You need a watcher, and in your routes pass a parameter like a timestamp when you want to bust the cached component.


	() => [
         timestamp: route.params.timestamp
		(changes) => {
			if (changes[0].timestamp) {

Then route to your components using

   name: {your route name},
   params: { timestamp: Date.now() }

@mirko77 Thank you for your suggestion.

Actually I am using something similar right now (watching route object in view component) to check if I come back to an existing route/component.

It works but still feels like a workaround for me.

An option in the router like “cache” true/false or “keepalive” would feel cleaner IMO.

There is no way to do it out of the box in vue router, unfortunately.

1 Like