如何在 vue-router 中分别在路由组合上使用 keep-alive

【问题标题】：How to use keep-alive on routed comps separately in vue-router如何在 vue-router 中分别在路由组合上使用 keep-alive
【发布时间】：2017-01-25 00:56:41
【问题描述】：

我有一个关于 vue-router 中的 keep-alive 的问题。我想创建一个列表细节结构化应用程序，所以我需要每次刷新细节组合但保持列表组合的滚动位置。由于 list comp 和 detail comp 在不同的路径下，我不知道如何解决这个问题。如果我将 keep-alive 添加到 router-view，它们都会保持滚动位置，我不希望细节补偿要做。

路线图如下所示。 SongList 是列表组合，Learderboard 是详细组合

router.map({
    '/':                    {
        component: Home
    },
    '/songs':               {
        component: SongList
    },
    '/leaderboard/:songId': {
        component: Leaderboard
    }
})

【问题讨论】：

您找到解决方案了吗？
你能发布父组件吗？
那么在状态下保存列表页的滚动位置怎么样？

标签： vue.js vue-router

【解决方案1】：

仅使用<keep-alive> 已保存您的滚动位置是否正确，并且您想为特定组件禁用它？当我的组件被关闭时，我的滚动位置丢失了，即使<keep-alive> 存在。为了保持我的滚动位置，我将<keep-alive> 与一个名为 vue-keep-scroll 的指令插件结合使用。 My 2.0 fork 仍然是 PR，但正在为我工作。如果你只需要 Vue 1.0，你可以使用original here。

如果你的情况和我一样，根本没有滚动位置，你可以这样设置：

// in main.js using vue-cli with webpack
var vueKeepScroll = require('vue-keep-scroll')
Vue.use(vueKeepScroll)

& 在我的组件中：

<div v-keep-scroll>
  <div v-for='item in list' v-html='content(item)' />
</div>

我看到 github 上有另一个插件在做类似的事情 here。

如果即使在组件之间切换后滚动位置也得到保存，您始终可以在挂载事件期间强制指定所需的位置。

【讨论】：