在路由器视图中的所有路由上保持活动状态 [英] Keep-alive on a single route instaead of all routes in router-view

问题描述

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

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.

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

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

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

推荐答案

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

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

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

这篇关于在路由器视图中的所有路由上保持活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！