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时是获取数据的。