I have successfully developed a small application with two main components using vue router for navigation.
The first component is named MoviesList and the second one is Movie. I have defined them in the routes.js file.
const routes = [
{
path: '/',
name: 'Home',
component: MoviesList
},
{
path: '/:movieId',
name: 'Movie',
component: Movie
}
]
Here's how my App.vue template looks like:
<template>
<router-view></router-view>
</template>
Is there a way to cache the MoviesList component as if it was wrapped with <keep-alive> tags?
I want the MoviesList component to be cached while keeping the Movie component unaffected.
This is needed because the MoviesList component has a method that executes on the mounted() hook, but when I navigate away and come back, the method runs again due to re-rendering of the component.