最近，在PC端的前端项目中，需要实现以下场景。
1 .在页面查询列表中，如果进入详细页面，则返回页面并返回上次浏览的位置(保留列表中的当前页面和搜索条件数据) ) ) )。
2 .在前端长时间缓存数据不满足业务要求，因为查询列表中检索的数据可能会在很短的时间内发生更改。
3 .我可以在进入详细页面时修改列表中的数据。 我觉得返回时滚动，用户看到的是最新的数据
4 .每个列表页面都必须保存当前页面和搜索条件数据。
关于以上几点：
页面缓存必须使用vue的内置组件keep-alive缓存列表页面，并结合路由选项修改页面中的数据。
对于已设置keep-alive缓存的组件，第一次进入组件时组件的挂接函数，created -- mounted --activated时活动挂接函数
1 .路由出口渲染组件时的设置：
2 .在路由选项中，设置meta属性。 如果" keepAlive "为true，则表示需要缓存的组件。 此外，还可以设置isBack属性以标记页面是否从详细信息页面返回。
{
name: '首页'，
path : '索引'，
组件：索引，
元：{
keepAlive: true，
isBack: false
}
(，
3 .在组件实例中，beforerouteenter(to，from，next )路由保护确定路由从何处跳转，如果从详细信息页面跳转，则返回当前路由对象的MMS
beforerouteenter(to，from，next ) {
if(from.path=='/detail ' ) }
to.meta.isBack=true；
} else {
to.meta.isBack=false；
}
next (；
(，
在活动挂接函数中装载页面首次进入时的请求数据，以便在其他页面进入时更新页面中的列表数据。
活动() }
if (！ this.$route.meta.isBack ) {
this.list=[]；
this.pageNum=1；
this.getList (；
}
this.$route.meta.isBack=false；
(，
4 .进入详细页面，需要修改该数据的，修改成功后应该返回，更新列表。
因为返回时滚动到浏览位置，所以不能在后台重新请求数据。 否则，无法返回到之前浏览的位置。 相反，它保存在前端更改的数据，并在返回的活动挂接中更改当前列表数据。
需要注意的事项：
由于vue本身的限制，无法检测数组的直接长度更改或索引值的使用，因此VM.$set(VM.array、index、newValue )或VM.array.splice )索引(1，)
然后根据页面离开时保存的滚动位置，将页面滚动到浏览位置。 在router-view入口，watch，$route对象将在keep-alive为true的页面上滚动到上一个浏览位置。
5 .在页面列表中，必须使用分页加载数据。 也就是说，是滑动加载
在keep-alive组件中，页面离开时，当前vue实例不会被销毁，而是存储在内存中。 因此，您会遇到一个问题，就是在跳转页面时发生滑动事件，加载存储在内存中的所有滑动事件，并且vue实例中的数据发生了更改。
因此，组件的路由防护要求在页面离开时在beforeRouteLeave中禁用幻灯片事件，在页面进入时在activated挂接中重新启动幻灯片事件。
注：不能使用keep-alive销毁实例。 虚拟机. $ destroy (； 否则进入页面，即使keep-alive为true，也不会保存组件。 如果有很多keep-alive页面，可以在路由保护中更改vuex变量以动态更改keep-alive页面变量。