vue页面详情页返回列表页_vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置...

背景描述：

最近在做移动端前端项目中，需要实现以下场景：

1.在页面查询列表，进入详情页时，返回需要页面返回到上次浏览的位置

2.由于查询列表获取的数据可能会短时间改变，如果前端长时间缓存数据，并不符合业务要求。

3.我在进入详情页时可以修改列表的数据，返回时滚动到，用户看到的应该是最新的数据

4.每个列表页面需要用到滑动加载更多数据。

项目中vue的使用：

1.用到keep-alive来缓存页面

2.当详情页中改变列表数据时，配合keep-alive,需要在vue钩子函数activated中，对数据进行更改

3.在从其他页面进入时，页面要重新加载数据。页面从列表进入其他页面(非详情页)时，销毁当前的vue实例。此时需用到组件内的路由守卫，beforeRouteEnter和beforeRouteLeave

4.列表页滑动加载

具体实现：

针对以上前三点，页面的缓存，我们需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。

在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated

再次进入时，只触发activated钩子函数

1.在路由出口渲染组件时配置：

复制代码

2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性