维生是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
用法也很简单:
& lt; keep-alive>
& lt; component>
& lt; !——该组件将被缓存!——比;
& lt;/component>
& lt;/keep-alive>
<强>道具
包括-字符串或正则表达,只有匹配的组件会被缓存
排除——字符串或正则表达式,任何匹配的组件都不会被缓存
//组件
出口默认{
名称:' a ',
数据(){
返回{}
}
}
& lt;点火电极包括=癮”比;
& lt; component>
& lt; !——名称为的组件将被缓存!——比;
& lt;/component>
& lt;/keep-alive>可以保留它的状态或避免重新渲染
& lt;维生排除=癮”比;
& lt; component>
& lt; !——除了名称为的组件都将被缓存!——比;
& lt;/component>
& lt;/keep-alive>可以保留它的状态或避免重新渲染
& lt;点火电极包括=皌est-keep-alive”比;
& lt; !——将缓存名字为test-keep-alive的组件——比;
& lt; component> & lt;/component>
& lt;/keep-alive>
& lt;点火电极包括=" a、b "比;
& lt; !——将缓存名字为或者b的组件,结合动态组件使用——比;
& lt;组件:="视图"祝辞& lt;/component>
& lt;/keep-alive>
& lt; !——使用正则表达式,需使用v-bind——比;
& lt;点火电极:包括="/| b/北?
& lt;组件:="视图"祝辞& lt;/component>
& lt;/keep-alive>
& lt; !——动态判断——比;
& lt;点火电极:包括=癷ncludedComponents”比;
& lt; router-view> & lt;/router-view>
& lt;/keep-alive>
& lt;维生排除=皌est-keep-alive”比;
& lt; !——将不缓存名字为test-keep-alive的组件——比;
& lt; component> & lt;/component>
& lt;/keep-alive>
<强>遇见vue-router
router-view也是一个组件,如果直接被包在保活里面,所有路径匹配到的视图组件都会被缓存:
& lt; keep-alive>
& lt; router-view>
& lt; !——所有路径匹配到的视图组件都会被缓存!——比;
& lt;/router-view>
& lt;/keep-alive>
然而产品汪总是要改需求,拦都拦不住…
<强>问题
如果只想router-view里面某个组件被缓存,怎么办?
使用包含/排除
增加路由器。元属性
使用包含/排除
//组件
出口默认{
名称:' a ',
数据(){
返回{}
}
}
& lt;点火电极包括=癮”比;
& lt; router-view>
& lt; !——只有路径匹配到的视图一组件会被缓存!——比;
& lt;/router-view>
& lt;/keep-alive>
排除例子类似。
缺点:需要知道组件的名称、项目复杂的时候不是很好的选择
增加路由器。元属性
//航线配置
出口违约(
{
路径:“/?
名称:“回家”,
组件:回家,
元:{//需keepAlive: true要被缓存
}
}, {
路径:/:账号,
名称:“编辑”,
组件:编辑,
元:{
keepAlive:假//不需要被缓存
}
}
]
& lt; keep-alive>
& lt; router-view v=" $ route.meta.keepAlive "比;
& lt; !——这里是会被缓存的视图组件,比如回家!——比;
& lt;/router-view>
& lt;/keep-alive>
& lt; router-view v=" ! route.meta.keepAlive美元”在
& lt; !——这里是不被缓存的视图组件,比如编辑!——比;
& lt;/router-view>
优点:不需要例举出需要被缓存组件名称
【加盐】使用路由器。元拓展
假设这里有3个路由:A, B, c .
需求:
默认显示一个
B跳到一个,不刷新
C跳到一个,刷新
实现方式
在路由里面设置元属性:
{
路径:“/?
名称:' A ',
组件:,
元:{//需keepAlive: true要被缓存
}
}
在B组件里面设置beforeRouteLeave:
出口默认{
数据(){
返回{};
},
方法:{},
beforeRouteLeave(下),从{//设置下一个路由的元
to.meta。keepAlive=true;//让缓存,即不刷新
next ();
}
