前言：对于前端，都会遇到这么一个场景。例如列表页面，点击相应列表，进入详情页面，在详情页返回到列表页面时，需要返回到用户点击的那个列表，页面不刷新。
关于这个实现，这里需要满足以下两点：
1.必须是个单页面
2.必须使用了vue-router路由。
如果不满足以上条件，例如不是单页面应用，是个多页面应用，这时候是不适合以下的实现方法的。
解决思路：
1.返回列表页不刷新，即不请求数据
2.记录用户点击后列表页的滚动距离，即scrollTop值。返回后滚动到记录的scrollTop值
实现原理：
1.利用vue的组件级缓存标签<keep-alive></keep-alive>，该标签可以使其包裹在内部的组件在内存中缓存，不被销毁，这样子就可以达到我们解决思路的第一条，页面不刷新，不重新请求数据。
2.记录滚动距离
3.在返回列表页后用activated生命周期设置记录的滚动距离
生命周期执行顺序：
1.不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
2.使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
3.使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated
具体实现
step1:
//在App.vue文件中用keep-alive标签按条件缓存路由页面
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
step2:
关键点：设置默认的meta.keepAlive为true,因为keepAlive是针对进入列表页之前是否需要缓存本次进入的数据。true为缓存，false为不缓存
//在router/index.js文件设置step1启用哪个router-view
export default new Router({
routes: [
{
path:'/detail',//详情页面
name:'Detail',
component:Detail
},{
path:'/list',//列表页面
name:'List',
component:List,
meta:{
keepAlive:true
}
}
]
})
step3:
//list.vue（列表页面）文件，在路由离开前判断如果进入详情页面，则缓存本页数据，如果不是，则不缓存
beforeRouteLeave(to, from, next) {
if (to.name == "Detail") {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
}
next();
}
step4:
在离开list页面前记录页面滚动距离，具体代码视页面HTML结构决定。
step5:
在进入list页面后，activated生命周期中设置滚动距离。具体代码视页面HTML结构决定。
总结
这种方式仅适用于使用vue-router路由的项目。对于多页面的解决方案，目前没有想到好的解决方法。
