How to use keep-alive on routed comps separately in vue-router

Question

I've got a question about keep-alive in vue-router. I want to create a list-detail structured app, so I need to refresh the detail comp every time but keep the scroll position of the list comp. As the list comp and the detail comp are under different routes, I don't know how to solve this. If I add keep-alive to router-view, they both keep their scroll position, which I don't want the detail comp todo.

Route map looks like below. SongList is the list comp and Learderboard is the detail comp

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

Well how about saving the scroll position of list page in state? — Deepak

okwme okwme · Accepted Answer · 2016-11-29T13:17:25

Is it correct that your scroll position is already saved just by using <keep-alive>, and you'd like to disable it for a specific component? My scroll position was lost when my component was switched out, even when <keep-alive> was present. In order to keep my scroll position I used <keep-alive> in combination with a directive plugin called vue-keep-scroll. My 2.0 fork is still a PR but is working for me. If you only need it for Vue 1.0 you can use the original here.

If your situation is like mine where no scroll position is kept at all you could set it up like this:

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

& in my component:

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

I see there's another plugin on github doing something similar here.

If scroll position is getting saved even after switching between components you could always force a desired position during the mounted event.

How to use keep-alive on routed comps separately in vue-router

1 Answers