//页面中添加,路径配置即将要跳转的页面
`beforeRouteEnter(to, from, next) {
// just use this
//需要跳转至历史数据页,返回时本页面不刷新
//动态修改mate里面得keepAlive,除历史数据页外,跳到其他页面还是要刷新得
if (from.path == '/analysHistory') {
to.meta.keepAlive = true
} else {
to.meta.keepAlive = false
} next()
},`
//跳转的路由中存贮
`{
path: '/analysDevice',
name: 'analysDevice',
component: analysDevice,
meta: { keepAlive: true }
//需要缓存,但是这个值可以在页面中调用beforeRouteEnter进行修改
}, {
path: '/analysDevice',
name: 'analysDevice',
component: analysDevice,
meta: {} //不需要缓存处理
},`
//APP.vue中添加
`<div id="app">
//keep-alive:主要用于保存组件状态,避免重新渲染,mate中储存keepAlive为true时,加上此组件
<router-view v-if="$route.meta.keepAlive">
<router-view v-if="!$route.meta.keepAlive">
`
`keep-alive: 主要用于保存组件状态,避免重新渲染 keep-alive: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
keep-alive属性:
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
<keep-alive include='test'> //组件名为test的会被缓存 <router-view/> </keep-alive> <keep-alive include='as,zx'> //组件名为as或者zx的会被缓存 <router-view/> </keep-alive>
exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存,其他组件都会被缓存
<keep-alive exclude='test'> //组件名为test的‘不’会被缓存 <router-view/> </keep-alive>
max - 数字。最多可以缓存多少组件实例 组件里如果数量超过max。那么则使用会把最久没有被访问过的组件移出缓存队列注销掉。而所用的底层机制就是利用
LRU算法 方式
LUR缓存淘汰法 根据历史的数据来淘汰数据。重点:保护最近被访问过的组件,淘汰最久没有访问的。主要思想,如果数据最近没有访问过,那么他后面被访问的几率不会打
<keep-alive :include="test" :max="10"> <component>only one</component> </keep-alive>