4

我有一个关于 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
    }
})
4

1 回答 1

1

您的滚动位置已经通过使用保存<keep-alive>，并且您想为特定组件禁用它是否正确？当我的组件被关闭时，我的滚动位置丢失了，即使<keep-alive>存在。为了保持我的滚动位置，我<keep-alive>结合使用了一个名为 vue-keep-scroll 的指令插件。我的 2.0 fork仍然是 PR，但对我有用。如果您只需要 Vue 1.0，您可以在此处使用原始版本。

如果您的情况像我的情况一样，根本没有保留滚动位置，您可以这样设置：

// 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 上有另一个插件在这里做类似的事情。

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

于 2016-11-29T13:17:25.257 回答