Question

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

路线图如下所示。 SongList是列表comp，Learderboard是详细信息

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

Answer 1

仅使用<keep-alive>保存滚动位置是否正确，并且您想为特定组件禁用它？当我的组件被切换时，即使存在<keep-alive>，我的滚动位置也会丢失。为了保持我的滚动位置，我将<keep-alive>与名为vue-keep-scroll的指令插件结合使用。 My 2.0 fork仍然是公关，但正在为我工作。如果您只需要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。

如果在组件之间切换后即使保存滚动位置，也可以在装载事件期间强制执行所需位置。

如何在vue-router中单独使用keep-alive on routed comps

1 个答案: