Keep-alive 在单个路由上而不是路由器视图中的所有路由

Question

如果 keep-alive 被指定到 router-view 如下

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

然后所有路由都被有效地缓存并在重新访问该路由时重新加载。

我希望能够在各个路由上指定保持活动状态的选项。

有很多路由，只有 1 或 2 个需要保持活动状态而无需重新渲染缓存所有路由都是无用的

是否有任何方法或任何可用的解决方法

Answer 1

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

Vue 版本 2.1.0 中的新功能，include 和 exclude 属性用于有条件地缓存组件。注意 name 选项的使用。

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)]
    }
  }
}

Keep-alive 在单个路由上而不是路由器视图中的所有路由

Keep-alive on a single route instaead of all routes in router-view

vue.js

vue-router

vue-component

vuejs2