在路由器视图

时间:2017-03-30 11:29:56

标签: vue.js vuejs2 vue-component vue-router

如果将keep-alive指定给router-view,如下所示

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

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

我希望能够在各个路线上指定保持活动选项。

对于许多路由而且只有1或2个需要保持活动而不重新渲染缓存所有路由都是无用的

是否有任何方法可以执行此操作或任何可用的解决方法

1 个答案:

答案 0 :(得分:15)

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

Vue版本2.1.0中的新增内容,用于有条件地缓存组件的includeexclude道具。请注意使用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)]
    }
  }
}