Vue设置keepAlive不生效问题
如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再刷新查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件。1、在App.vue中的设置<template><div id="app"><keep-alive><router-view v-
·
如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再刷新
查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件。
1、在App.vue中的设置
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
2、在router中的index.js设置,利用meta属性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
正常的话这样页面就能缓存并生效了,如果还是不生效
检查这个组件在router文件中的配置name和组件实例中的name不一致,如下面,全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的,而App.js 中的keepAlive标签中的exclude是对比的组件实例中的name
使用过程发现,组件的name和router配置的name不一样,keep-alive也无法生效,这里也提供给我们一种思路,如果页面不需要缓存,把name设置不一样就好了(不推荐使用)
更多推荐
已为社区贡献4条内容
所有评论(0)