Vue添加缓存后,返回上一级怎样刷新数据
发布于 1 个月前 作者 huaer 166 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
3 回复

在路由里定义一个meta的值,设置一个值来判断是否要缓存当前组件,列:meta: {keepAlive:true},然后就在页面中控制是否要缓存当前组件,然后再通过路由钩子(beForeRouterLeave),或者是路由名字来判断是回退还是前进,来设置meta的值,让后页面是否刷新;当页面使用了keep-alive 的时候,页面的组件是被缓存下来的。此时就不会 触发created这个钩子函数;当使用keep-alive 的时候,会触发activated,deactivated;如果是没有使用keep-alive ,就不会触发activated,deactivated 这两个钩子函数,但是会触发其余的钩子(created,mounted等),如果使用了,就会触发,但是不会触发activated,deactivated 这两个钩子函数,一个是进入的时候触发activated这个钩子,一个是离开的时候触发deactivated 这个钩子。

解决了,大家可以参考一下这篇文章,感谢文章作者: https://www.jb51.net/article/161030.htm

activated() {
this.pageNumber = 1;
this.total = 0;
this.prepareData.articleList = []; // 清空列表数据
this.getStoryList(); // 重新加载
},
在activated里重置了数据,但是会刷新整个列表,回到列表顶部,用户体验不好

回到顶部