vue.js – 如何在vue-router中分别对路由的comps使用keep-alive

2023年11月3日 246次阅读

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

路线图如下所示. SongList是列表comp,Learderboard是详细comp

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

最佳答案 仅使用< 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的操作.

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

点赞