主要介绍了vue实现前进刷新，后退不刷新效果,即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。本文给大家分享实现思路，需要的朋友可以参考下

主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

需求一: 在一个列表页中，第一次进入的时候，请求获取数据。 点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。 也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。 解决方案在 app.vue 设置: 假设列表页为 list.vue ,详情页为 detail.vue ,这两个都是子组件。 我们在 keep-alive 添加列表页的名字，缓存列表页。 然后在列表页的 created 函数里添加ajax请求，这样只有第一次进入到列表页的时候才

最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷新。 由于 keep-alive 会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用 this.$destroy(true) 来将界面销毁掉。

vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage，页面刷新不影响路由记录 路由懒加载，返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意基于Vue的UI框架 demo   手机扫码 在线预览 说明 配套包含两个组件 vue-route-transition 负责动画 router-layout 负责页面排版。 主要是解决transform动画，