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

I have a question about keep-alive in vue-router. I want to create a structured application with list details, so I need to update comp details every time, but keep the scroll position of the comp list. Since the comp list and comp comp details are under different paths, I don't know how to solve this. If I add keep-alive in router-view, they retain their scroll position, which I do not want to comp comp details.

The route map is as follows. SongListis a comp list, and Learderboardis a comp comp

router.map({
    '/':                    {
        component: Home
    },
    '/songs':               {
        component: SongList
    },
    '/leaderboard/:songId': {
        component: Leaderboard
    }
})
+4
source share
1 answer

, <keep-alive>, ? , , <keep-alive> . , <keep-alive> , vue-keep-scroll. My 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, - .

, .

+1

Source: https://habr.com/ru/post/1654836/


All Articles