完美解决vue keep-alive 缓存问题_vue.js教程,AngularJS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

一：摘要：使用vue开发单页面应用，如何解决页面缓存问题（尤其在手机端），如何才能做到新打开的页面获取最新数据，返回上一个页面获取最新的缓存页面数据？

二：页面打开和缓存流程：

页面顺序： A页面（首页） B页面（列表） C页面（详情） D页面（评论） .......

从首页->评论缓存： A 打开 B B 打开 C C 打开 D D 打开 ...
缓存 A 缓存B 缓存C 缓存D
B获取新数据 C获取新数据 D获取新数据 ...获取新数据

从 ...-> 首页缓存： ... 返回 D D 返回 C C 返回 B B 返回 A
显示D的缓存显示C的缓存显示B的缓存显示A的缓存

三：为了解决上面的缓存流程问题，需要了解的知识：

1：keep-alive 组件；说明：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；

|- include 属性说明：只要include包含组件name则缓存下来；官方解释：允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
|- exclude 属性说明：只要exclude包含组件name则不缓存下来；官方解释：组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

2：路由配置参数中的 scrollBehavior 滚动行为，主要记录滚动位置的，我们不仅可以利用来记录缓存页面滚动的位置，还可以利用 savedPosition 知道页面到底是前进还是后退

 const RouterConfig = {
 mode: "hash", //hash history
 routes: Routers,
 scrollBehavior: function (to, from, savedPosition) {
 // console.log(to) // to：要进入的目标路由对象，到哪里去
 // console.log(from) // from：离开的路由对象，哪里来
 // console.log(savedPosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
 // 从第二页返回首页时savedPosition为undefined
 if (savedPosition || typeof savedPosition === 'undefined') //后退
 {
   //后退滚动到上一次位置
   if (savedPosition) { return savedPosition }
 } else { //前进
   //前进滚动到顶部
   return {x:0,y:0}
 }
 }
 }

3：vue 生命周期中的 2个钩子 activated 和 deactivated

activated keep-alive 组件激活时调用下面简单讲解下，建议看vue官方文档细致了解下
deactivated keep-alive 组件停用时调用下面简单讲解下，建议看vue官方文档细致了解下

啥意思呢？如果不使用 keep-alive，我们经常在 created 中执行页面打开前的动作，比如：ajax获取数据；

不使用 keep-alive 打开页面执行 created
使用 keep-alive 打开页面执行 created 之后又会执行 activated ，如果此时返回上一页（就是缓存的页面）那么只执行 activated

再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子，如果返回到缓存的页面，此时缓存页面不执行 created了，如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中，
放在created中无效；

四：互联网上我也看了有好几个解决方案，但都有问题，不是最佳方案，我研究vue源码后总结了完美方案，写出来，方便大家开发项目，互相学习+吐槽；

五：下面就用代码来演示步骤

第一步：router.js 新建路由

/*
* 
* keepAlive 是否缓存页面，true缓存 false 不缓存
* tabs 主要作用：解决tab之间路由跳转（一般值replace跳转），tab之间跳转应该不缓存页面，每次切换都是最新数据
 tabs 类型是数组，如下图 tab1 和 tab2 和 tab3 其实是3个tab页面不同组件，那么路由replace跳转不需要缓存数据
*
*/
const Routers =[
 {
     path: "/index",
     name: "index",
     meta: {
       title: "首页",
       keepAlive:true
     },
     component: resolve => require(["@/views/test/index"], resolve)
 },
 {
     path: "/tab1",
     name: "tab1",
     meta: {
       title: "我是tab1列表",
       keepAlive:true,
       tabs:['tab1','tab2','tab3']
     },
     component: resolve => require(["@/views/test/tab1"], resolve)
 },
 {
     path: "/tab2",
     name: "tab2",
     meta: {
       title: "我是tab2列表",
       keepAlive:true,
       tabs:['tab1','tab2','tab3']
     },
     component: resolve => require(["@/views/test/tab2"], resolve)
 },
 {
     path: "/tab3",
     name: "tab3",
     meta: {
       title: "我是tab3列表",
       keepAlive:true,
       tabs:['tab1','tab2','tab3']
     },
     component: resolve => require(["@/views/test/tab3"], resolve)
 },
 {
     path: "/content",
     name: "content",
     meta: {
       title: "我是列表详情",
       keepAlive:true
     },
     component: resolve => require(["@/views/test/content"], resolve)
 }
]

第二步：打开 APP.vue 页面注意：这里的 cachePageName 一定是组件name，不是路由name（必须每个组件都加上name，组件name必须写成和路由name一样）

html代码：

 <keep-alive :include="cachePageName">
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

js代码：

 export default {
 name: "App",
 data() {
     return {


     }
 },
 computed:{
     cachePageName(){
         return this.$store.state.cachePageName;
     }
 },
 created(){
 //监听页面刷新
             window.addEventListener('beforeunload',function(){
              //监听刷新默认缓存当前组件
                 that.$store.commit('resetcachePageName',that.$route.name);
             })
 }
 }

第三步：这里需要用到vuex，如果没安装的请自行安装vuex，这里不做解释；

 const store = new Vuex.Store({
 state: {
     cachePageName:'', //缓存组件名称
   },
 mutations: {
 //重置缓存组件名称
     resetcachePageName(state, res){
         state.cachePageName = res;
     },
 //添加缓存组件名称
 addcachePageName(state, res){
     if(state.cachePageName == ''){
         state.cachePageName = res;
     }else{
         let arr = state.cachePageName.split(',');
         if (res && typeof res === 'string') {
             let i = arr.indexOf(res);
             if (i <= -1) {
                 state.cachePageName = state.cachePageName+','+res;
             }
         }
     }
 },
 //删除缓存组件名称
 delcachePageName(state, res){
     let arr = state.cachePageName.split(',');
     if (res && typeof res === 'string') {
       let i = arr.indexOf(res);
       if (i > -1) {
           arr.splice(i, 1);
           state.cachePageName = arr.join();
       }
     }
 }
 }
 })

第四步：修改路由中 scrollBehavior 滚动行为，在前进和后退中动态删除和新增需要缓存的组件

 // 路由配置
 const RouterConfig = {
 mode: "hash", //hash history
 routes: Routers,
 scrollBehavior: function (to, from, savedPosition) {
 // console.log(to) // to：要进入的目标路由对象，到哪里去
 // console.log(from) // from：离开的路由对象，哪里来
 // console.log(savedPosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
 // 从第二页返回首页时savedPosition为undefined
 if (savedPosition || typeof savedPosition === 'undefined') //后退
 {


   //判断是否是相邻得tab（tab跳转一定要replace跳转），如果是，那么每次打开都是获取最新页面
   if(typeof from.meta.tabs !== 'undefined' && from.meta.tabs.length > 0)
   { //是tabs


     //清空tabs之间切换缓存，tabs直接跳转是不需要缓存的，因为大家都是同级页面
     from.meta.tabs.map(function(vo,index){
       store.commit('delcachePageName',vo);
     })


   }else{ 
    //不是tabs


     //后退到缓存页面，那么这里需要删除上一个页面的缓存，因为你要是再次打开，肯定要获取最新的页面数据 A-B-C 如果从C返回B肯定要把C的缓存删除，不然你从B-C，那就显示C的缓存了
     store.commit('delcachePageName',from.name);
   }


   //后退滚动到上一次位置
   if (savedPosition) { return savedPosition }


 } else { //前进


   //前进把前进的页面加入到要缓存的组件中
   store.commit('addcachePageName',to.name);


   //前进滚动到顶部
   return {x:0,y:0}


 }
 }
 }

第五步：如果还是不明白，可以加我qq：957987132，互相学习交流。

完美解决vue keep-alive 缓存问题

猜你喜欢