vue2中的keep-alive使用总结及注意事项

2023-09-19 02:10:06 61

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。

基本使用如下：

一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页

有两个情况：

1.直接点击浏览器的后退返回按钮。

2.点击导航栏中的/list的链接返回。

那么针对第一种情况下，我们直接通过后退按钮时，返回到列表页(/list)是不需要请求数据。

针对第二种情况下，我们通过链接返回到列表页是需要请求数据。

所以这边有三种情况：

1.默认进来列表页需要请求数据。

2.进入详情页后，通过浏览器默认后退按钮返回，是不需要ajax的请求的。

3.进入详情页后，通过点击链接返回到列表页后，也是需要发ajax请求的。

配置如下：

1.入口文件app.vue的配置如下：

2.在router中设置meta属性，设置keepAlive:true表示需要使用缓存，false的话表示不需要使用缓存。且添加滚动行为scrollBehavior

router/index.js的配置如下：

importVuefrom'vue';
importRouterfrom'vue-router';
//importHelloWorldfrom'@/views/HelloWorld';
Vue.use(Router);
constrouter=newRouter({
mode:'history',//访问路径不带井号需要使用history模式，才能使用scrollBehavior
base:'/page/app',//配置单页应用的基路径
routes:[
{
path:'/',
name:'list',
component:resolve=>require(['@/views/list'],resolve),//使用懒加载
meta:{
keepAlive:true//true表示需要使用缓存
}
},
{
path:'/list',
name:'list',
component:resolve=>require(['@/views/list'],resolve),//使用懒加载
meta:{
keepAlive:true//true表示需要使用缓存false表示不需要被缓存
}
},
{
path:'/detail',
name:'detail',
component:resolve=>require(['@/views/detail'],resolve)//使用懒加载
}
],
scrollBehavior(to,from,savedPosition){
//保存到meta中，备用
to.meta.savedPosition=savedPosition;
if(savedPosition){
return{x:0,y:0};
}
return{};
}
});
exportdefaultrouter;

3.list.vue代码如下：

4.detail.vue代码如下：

二：使用router.meta扩展

假设现在有3个页面，需求如下：

1.默认有A页面，A页面进来需要一个请求。

2.B页面跳转到A页面，A页面不需要重新请求。

3.C页面跳转到A页面，A页面需要重新请求。

实现方式如下：

在A路由里面设置meta属性：

{
path:'/a',
name:'A',
component:resolve=>require(['@/views/a'],resolve),
meta:{
keepAlive:true//true表示需要使用缓存
}
}

所以router/index下的所有代码变为如下：

importVuefrom'vue';
importRouterfrom'vue-router';
//importHelloWorldfrom'@/views/HelloWorld';

Vue.use(Router);

constrouter=newRouter({
mode:'history',//访问路径不带井号需要使用history模式，才能使用scrollBehavior
base:'/page/app',//配置单页应用的基路径
routes:[
{
path:'/',
name:'list',
component:resolve=>require(['@/views/list'],resolve),//使用懒加载
meta:{
keepAlive:true//true表示需要使用缓存
}
},
{
path:'/list',
name:'list',
component:resolve=>require(['@/views/list'],resolve),//使用懒加载
meta:{
keepAlive:true//true表示需要使用缓存false表示不需要被缓存
}
},
{
path:'/detail',
name:'detail',
component:resolve=>require(['@/views/detail'],resolve)//使用懒加载
},
{
path:'/a',
name:'A',
component:resolve=>require(['@/views/a'],resolve),
meta:{
keepAlive:true//true表示需要使用缓存
}
},
{
path:'/b',
name:'B',
component:resolve=>require(['@/views/b'],resolve)
},
{
path:'/c',
name:'C',
component:resolve=>require(['@/views/c'],resolve)
}
],
scrollBehavior(to,from,savedPosition){
//保存到meta中，备用
to.meta.savedPosition=savedPosition;
if(savedPosition){
return{x:0,y:0};
}
return{};
}
});
exportdefaultrouter;

在B组件里面设置beforeRouteLeave

beforeRouteLeave(to,from,next){
//设置下一个路由meta
to.meta.keepAlive=true;//让A缓存，不请求数据
next();//跳转到A页面
}

B组件所有代码如下：

在C组件里面设置beforeRouteLeave：

beforeRouteLeave(to,from,next){
//设置下一个路由meta
to.meta.keepAlive=false;//让A不缓存，重新请求数据
console.log(to)
next();//跳转到A页面
}

c组件所有代码如下：

a组件内的所有的代码如下：

注意b组件到a组件不重新请求数据(包括点击链接和浏览器后退按钮)，c组件到a组件请求数据(包括点击链接和浏览器后退按钮).

查看github上的代码

总结

以上所述是小编给大家介绍的vue2中的keep-alive使用总结及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue2中的keep-alive使用总结及注意事项

vue

{{msg}}

{{msg}}

{{msg}}

{{msg}}

vue

{{msg}}

随机推荐

vue2中的keep-alive使用总结及注意事项

vue

{{msg}}

{{msg}}

{{msg}}

{{msg}}

vue

{{msg}}

热门推荐

随机推荐