前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue再次进入页面不会再次调用接口请求

vue再次进入页面不会再次调用接口请求

作者头像
江咏之
发布2022-06-16 09:38:16
6830
发布2022-06-16 09:38:16
举报
文章被收录于专栏:技术社区

在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存已经加载过的页面数据这样会大大提高效率,所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据,跳转到这个页面,修改的数据并没有变化。

实际例子:a页面展示了一组数据,需要跳到另一个页面修改其中的一项数据然后用router.push再跳转回来。然而实际跳转回来a页面的数据并没有改变。这里我们就需要用到actived这个生命周期了:下面是官网api的解释:

可以看出axtived需要配合keep-alive使用

我们就需要再项目的router-view加上keep-alive,例如:

然后在a页面加上actived生命周期:

进入该页面就会触发actived,然后执行数据请求接口,页面数据就进行了更新。

created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档