Keep previous page in Vue alive

Question

I am currently trying to build a small PWA to mimic an Android app and have come across Vuejs.

But currently I have ran into an issue that I have not been able to fix. When you scroll one of the lists on one of the homepages (movies/tvshows/news) and click on an item I would like to retain the position of those lists so when the user navigates back they wouldn't have to scroll again to get to the same item.

I tried a few things with the keep-alive property but fail to understand how it works. My app page currently looks like this. I use the :key="$route.fullPath" to make a detail page reload when you go from movie to movie.

<div id="content">
  <keep-alive>
    <transition :name="transitionName" mode="out-in">
      <router-view :key="$route.fullPath"></router-view>
    </transition>
  </keep-alive>
</div>

<div class="bottom">
  <div class="bottom-bar">
    <md-bottom-bar md-type="shift" md-sync-route>
      <md-bottom-bar-item id="bottom-bar-item-movies" md-label="Movies" to="/movies"
                          md-icon="movie"></md-bottom-bar-item>
      <md-bottom-bar-item id="bottom-bar-item-tvshows" md-label="TV Shows" to="/tvshows"
                          md-icon="tv"></md-bottom-bar-item>
      <md-bottom-bar-item id="bottom-bar-item-watchlist" md-label="News" to="/news"
                          md-icon="language"></md-bottom-bar-item>
    </md-bottom-bar>
  </div>
</div>

A detail page has a route with the name of the type and its id like /movies/348350. On a detail page there is a button to navigate back by using this.$router.go(-1).

Is there an easy way that I have missed till now how to do this?

Answer 1

According to the docs, <keep-alive> needs to be inside:

<transition :name="transitionName" mode="out-in">
  <keep-alive>
    <router-view :key="$route.fullPath"></router-view>
  </keep-alive>
</transition>