18

if keep-alive is specified to router-view as below

<keep-alive>
    <router-view></router-view>
</keep-alive>

then all routes are effectively cached and reloaded when that route is revisited.

I'd like to be able to specify a keep-alive option on individual routes.

With many routes and only 1 or 2 that need to be kept alive wihout re-rendering caching all routes is useless

is there any method of doing so or any workaround available

boomboxboy
  • 2,384
  • 5
  • 21
  • 33
  • For Vue 3 see https://stackoverflow.com/questions/65619181/how-to-make-certain-component-keep-alive-with-router-view-in-vue-3 –  Sep 13 '21 at 14:46

1 Answers1

21

https://jsfiddle.net/Linusborg/L613xva0/4/

New in Vue version 2.1.0, the include and exclude props for conditionally caching components. Note the use of the name option.

const Foo = {
    name: 'foo',
  template: '<div><p v-for="n in numbers">{{ n }}</p></div>',
  data: function() {
    return {
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}

const Bar = {
    name: 'bar',
    template: '<div><p v-for="n in numbers"><strong>{{ n }}</strong></p></div>',
  data: function() {
    return {
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}
Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • thank you... can yiu provide the link for the documentation of this include and exclude props...once again thank you – boomboxboy Mar 31 '17 at 08:40