vue.js - 如何在 vue-router 中单独对路由组件使用 keep-alive

Question

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

路线图如下所示。 SongList 是列表排版，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仍然是 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 .

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