Question

我目前正在尝试build a small PWA来模仿Android应用并遇到Vuejs。

但是目前我遇到了一个我无法解决的问题。当您滚动其中一个首页（movies / tvshows / news）上的列表之一并单击某个项目时，我想保留这些列表的位置，以便当用户向后导航，他们不必再次滚动即可到达同一项目。

我尝试使用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>

详细信息页面上的路由带有类型名称和ID，例如/movies/348350。在详细信息页面上，有一个按钮，可以使用this.$router.go(-1)向后导航。

到现在为止，有没有一种我错过的简便方法？

Answer 1

根据docs，<keep-alive>必须位于其中：

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

使Vue中的上一页保持活动状态

1 个答案: