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

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

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

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

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

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

Logo

前往低代码交流专区

更多推荐