Disable IonRouterOutlet Component Caching

Ionic Framework Ionic Vue
1

Hi!

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?

2

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

3

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

4

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

5

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

Like:


watch(
	() => [
		{
         timestamp: route.params.timestamp
		}
		],
		(changes) => {
			if (changes[0].timestamp) {
				//refresh
			}
		}
);

Then route to your components using

 router.replace({
   name: {your route name},
   params: { timestamp: Date.now() }
 });
6

@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.

7

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

1 Like