Vue keep-alive 在 Quasar 中不起作用，安装的钩子总是使用 $router.back() 调用

Question

我有一个 Quasar 应用程序，我想在以下场景中使用 keep-alive 缓存某些页面：用户从主页导航到第 1 页，然后从第 1 页用户导航到第 2 页，然后用户使用 $router.back 返回() 从第 2 页到第 1 页，在当前场景中，mounted() 钩子在第 1 页中再次运行，并且页面重新渲染，进行另一个完全没有必要的 API 调用。我当前的实现如下所示：

  <q-page-container class="overflow-auto">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </q-page-container>

我已经在路线和页面本身中设置了名称属性。我也尝试使用 include="Home,Workout" 但结果是相同的，安装的钩子每次都会运行并且页面会重新渲染。我还需要页面保持活动状态，以便我可以更改滚动行为，滚动回用户之前所在的位置left Page 1. 这被记住了，我可以看到控制台日志，例如显示y:883，但由于页面被重新渲染，它再次出现在顶部。值得一提的是，我正在使用路由器哈希模式？

Answer 1

router-view不能再直接在里面使用了keep-alive。使用插槽道具代替：

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>