vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

vue中，咱们所要实现的一个场景就是：

1.搜索页面==>到搜索结果页时，搜索结果页面要从新获取数据，

2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。

最近在项目中遇到这个问题，思考了几套方案，老是不太完善。百度搜到的方案也基本都只能知足一些很简单的需求。对于复杂一些的状况，仍是有些不完善的地方。如下是我的对于这种场景的一个摸索，也参考了百度。若有更好的方案，欢迎指出。

• 缓存组件，vue2中提供了keep-alive。首先在咱们的app.vue中定义keep-alive:

<keep-alive>      
    <router-view v-if="$route.meta.keepAlive"/>    
</keep-alive>    
<router-view v-if="!$route.meta.keepAlive"/>复制代码

这里是根据路由中的meta源信息中的keepAlive字段来判断当前路由组件是否须要缓存。这里的meta的keepAlive是咱们自定义的，固然你也能够叫别的名字。

下面在router/index.js即咱们的路由文件中，定义meta信息：

// list是咱们的搜索结果页面
{      
    path: '/list',  
    name: 'List',      
    component: resolve => require(['@/pages/list'], resolve),    
    meta: {        
        isUseCache: false,  // 这个字段的意思稍后再说      
        keepAlive: true  // 经过此字段判断是否须要缓存当前组件  
    }    
},复制代码

上面的component: resolve => require(['@/pages/list'], resolve)这里的组件引入方式可能和你们平时写的有些不同，这里是为了路由的懒加载用的，你们能够忽略。按照正常的import引入也能够，这个和本次的主题无关。如此一来，vue的路由会帮咱们去缓存list页面。

• 刷新数据or缓存数据的实现：

说这以前，先简单说一下和缓存相关的vue钩子函数。

设置了keepAlive缓存的组件：

       第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated

       后续进入时：beforeRouterEnter ->activated->deactivated

能够看出，只有第一次进入该组件时，才会走created钩子，而须要缓存的组件中activated是每次都会走的钩子函数。因此，咱们要在这个钩子里面去判断，当前组件是须要使用缓存的数据仍是从新刷新获取数据。思路有了，下面咱们来实现：

// list组价的activated钩子
activated() {
    // isUseCache为false时才从新刷新获取数据
    // 由于对list使用keep-alive来缓存组件，因此默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是咱们获取数据的函数
    } 
},复制代码

这里的isUseCache 其实就是咱们用来判断是否须要使用缓存数据的字段，咱们在list的路由的meta中已经默认设置为false，因此第一次进入list时是获取数据的。

因为咱们只要列表到详情页的时候缓存列表页的数据，因此咱们要在列表页的beforeRouteLeave的钩子判断，若是前往的是详情页面，则缓存数据：

// 列表页面的beforeRouteLeave钩子函数
beforeRouteLeave (to, from, next) {        
    if (to.name == 'Detail') {
        from.meta.isUseCache = true;    
    }        
    next();
},复制代码

如今，detail返回list页面。list页面已经被缓存数据了，那么如今若是前往search页面后再前往list页面时怎么让list页面不使用缓存数据而是获取新数据呢？答案就在list页面的activated钩子中：

// list组价的activated钩子
 activated() {
    // isUseCache为false时才从新刷新获取数据
    // 由于对list使用keep-alive来缓存组件，因此默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是咱们获取数据的函数   
    }
    // 经过这个控制刷新
    this.$route.meta.isUseCache = false;
},复制代码

咱们加了一行this.$route.meta.isUseCache=false;也就是从detail返回list后，将list的isUseCache字段为false，而从detail返回list前，咱们设置了list的isUseCache为true。因此，只有从detail返回list才使用缓存数据，而其余页面进入list是从新刷新数据的。

至此，一个前进刷新、后退返回的功能基本完成了。

若是场景再复杂一丢丢，好比，若是这个详情页是个订单详情，那么在订单详情页可能会有删除订单的操做。那么删除订单操做后会返回订单列表页，是须要列表页从新刷新的。那么咱们须要此时在订单详情页进行是否要刷新的判断。简单改造一下详情页：

data () {    
    return {
        isDel: false  // 是否进行了删除订单的操做       
    }
},
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        // 根据是否删除了订单的状态，进行判断list是否须要使用缓存数据
        to.meta.isUseCache = !this.isDel;                
    }        
    next();    
},
methods: {        
    deleteOrder () {       
        // 这里是一些删除订单的操做

        // 将状态变为已删除订单
        // 因此beforeRouteLeave钩子中就会将list组件路由的isUseCache设置为false    
        // 因此此时再返回list时，list是会从新刷新数据的 
        this.isDel = true; 
        this.$router.go(-1)
    }
}复制代码

至此，算是解决了个人vue项目中的这个前进刷新、后退缓存数据和浏览位置的问题。

最后再提一下，页面滚动位置的问题。

问题1：咱们知道，在vue这种单页应用中，若是你在a页面滚动了一段距离后，此时前往b页面后，b页面也会停留在a页面的滚动位置。这个问题的解决，咱们能够利用router自己提供的功能来解决：

routes: [    
    {      
        path: '/detail',      
        name: 'Detail',      
        component: resolve => require(['@/pages/detail'], resolve)    
    }    
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
          return savedPosition    
    } else {      
          if (from.meta.keepAlive) {        
               from.meta.savedPosition = document.body.scrollTop;      
          }        
          return { x: 0, y: to.meta.savedPosition || 0 }    
    }  
}复制代码

scrollBehavior是路由提供的基础功能，这段函数写的是：

1.若是经过浏览器自带的前进后退按钮切换的路由，那么会自动使用浏览默认的回滚上次页面的浏览位置。

2.若是是经过vue路由进行的页面切换。例如a前往b，首先判断a是否是经过keep-alive缓存的组件，若是是，则在a路由的meta中添加一个savedPosition字段，而且值为a的滚动位置。最后return的是页面须要回滚的位置。如此一来，若是打开一个页面，该页面的组件路由中meta.savedPosition为undefined的话，则页面滚动到（0,0）的位置，这样解决了问题1。那么若是打开一个页面，它的路由的meta.savedPosition有值的话，则滚动到上次浏览的位置，由于meta.savedPosition保存的就是上次浏览的位置。

若是以为有帮助的话，就收藏一下吧！