prevent refresh of index page when navigating away using Vue router

Question

I am new to Vue. I am using Vue-router and I have some animations and videos on my index page.

I would like to prevent the index page from refreshing if I navigate away to the about page for example, so that the user, when they click back to the index page won't have to start the videos and animations again.

Which lifecycle hooks would I need to make use of and is their a simple way to implement it?

Answer 1

After @Yom S pointed me in the direction I did some research and discovered that wrapping the router-view HTML elements in keep-alive tags we can achieve the outcome I desired. By explicitly naming the components one can make use of "includes" "excludes" keywords within the keep-alive element to include or exclude certain router views from re rendering

here is a link to an informative conversation on the vuejs forum regarding this very problem

https://forum.vuejs.org/t/conditional-keep-alive-with-vue-router-not-working/4319