Сохранить предыдущую страницу в Vue живым - PullRequest
Новая
       6

Сохранить предыдущую страницу в Vue живым

0 голосов
/ 26 сентября 2018

В настоящее время я пытаюсь создать небольшую PWA , чтобы имитировать приложение для Android, и натолкнулся на Vuejs.

Но в настоящее время я столкнулся с проблемой, которую мне не удалосьисправить.Когда вы прокручиваете один из списков на одной из домашних страниц ( фильмы / tvshows / новости ) и нажимаете на элемент, который я хотел бы сохранить в позицииэти списки, поэтому, когда пользователь переходит назад, ему не придется снова прокручиваться, чтобы перейти к тому же элементу.

Я пробовал несколько вещей со свойством keep-alive, но не понял, как оно работает.Моя страница приложения в настоящее время выглядит следующим образом.Я использую :key="$route.fullPath" для перезагрузки страницы сведений при переходе от фильма к фильму. 

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

Страница сведений содержит маршрут с именем типа и его идентификатором, например /movies/348350.На странице сведений есть кнопка для перехода назад с помощью this.$router.go(-1).

Есть ли простой способ, который я до сих пор упускал, как это сделать?

1 Ответ

0 голосов
/ 27 сентября 2018

Согласно документам , <keep-alive> должно быть внутри: 

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